<footer class="pt-8 bg-gray-900">
<div class="container lg:w-4/5 mx-auto">
<div class="flex flex-col md:flex-row md:flex-wrap lg:flex-row">
<div class="w-full mb-4 pl-4 lg:w-3/12 md:w-6/12">
<a href="javascript:void(0)" class="block mb-4">
<span class="tracking-wider text-blue-500
font-bold uppercase">Dry Components</span>
</a>
<p class="mb-4 leading-6 text-gray-400 pr-4">
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Ut mollitia, magnam dolor, minima
corrupti alias.
</p>
</div>
<div class="pl-4 mb-4 w-full lg:w-2/12 md:w-6/12">
<h4 class="font-bold uppercase text-blue-500 mb-4
tracking-wide">Company</h4>
<ul>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">How
it works?</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Features</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Pricing</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Blog</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
target="_blank">
Buy this theme
</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">DEVELOPERS</h4>
<ul>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Docs</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Integration</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">API Reference</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Download SDK</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">OTHER LINKS</h4>
<ul>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Privacy Policy</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Terms & Conditions</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Refund Policy</a>
</li>
</ul>
</div>
<div class="pl-4 pr-4 mb-4 w-full md:w-4/12 lg:w-3/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">Newsletter</h4>
<form action="" method="POST" id="newsletter"
class="relative">
<input type="text"
name="email"
id="email"
placeholder="Eg. johndoe@gmail.com"
class="text-sm p-2 w-full block border-2 rounded bg-gray-900 outline-none
border-blue-500">
<button class="absolute bg-blue-500 text-gray-50
w-9 top-1 right-1
rounded h-8">
<i class="fas fa-chevron-right"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-700 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p class="text-gray-400 tracking-wide text-center mt-8 md:mt-0">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
<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-500"
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-500"
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-500"
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-500"
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-500"
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>
</footer>
const Footer = () => {
return (
<footer className="pt-8 bg-gray-900">
<div className="container lg:w-4/5 mx-auto">
<div className="flex flex-col md:flex-row md:flex-wrap lg:flex-row">
<div className="w-full mb-4 pl-4 lg:w-3/12 md:w-6/12">
<a href="javascript:void(0)" className="block mb-4">
<span
className="tracking-wider text-blue-500
font-bold uppercase"
>
Dry Components
</span>
</a>
<p className="mb-4 leading-6 text-gray-400 pr-4">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut mollitia, magnam dolor, minima corrupti
alias.
</p>
</div>
<div className="pl-4 mb-4 w-full lg:w-2/12 md:w-6/12">
<h4
className="font-bold uppercase text-blue-500 mb-4
tracking-wide"
>
Company
</h4>
<ul>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
How it works?
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Features
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Pricing
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Blog
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
target="_blank"
>
Buy this theme
</a>
</li>
</ul>
</div>
<div className="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4
className="font-bold uppercase tracking-wide
text-blue-500 mb-4"
>
DEVELOPERS
</h4>
<ul>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Docs
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Integration
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
API Reference
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Download SDK
</a>
</li>
</ul>
</div>
<div className="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4
className="font-bold uppercase tracking-wide
text-blue-500 mb-4"
>
OTHER LINKS
</h4>
<ul>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Privacy Policy
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Terms & Conditions
</a>
</li>
<li>
<a
className="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
>
Refund Policy
</a>
</li>
</ul>
</div>
<div className="pl-4 pr-4 mb-4 w-full md:w-4/12 lg:w-3/12">
<h4
className="font-bold uppercase tracking-wide
text-blue-500 mb-4"
>
Newsletter
</h4>
<form
action
method="POST"
id="newsletter"
className="relative"
>
<input
type="text"
name="email"
id="email"
placeholder="Eg. johndoe@gmail.com"
className="text-sm p-2 w-full block border-2 rounded bg-gray-900 outline-none
border-blue-500"
/>
<button
className="absolute bg-blue-500 text-gray-50
w-9 top-1 right-1
rounded h-8"
>
<i className="fas fa-chevron-right" />
</button>
</form>
</div>
</div>
<div className="border-t border-gray-700 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p className="text-gray-400 tracking-wide text-center mt-8 md:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-center">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-center">
<a href="https://instagram.com" target="_blank">
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-center">
<a href="https://youtube.com" target="_blank">
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-center">
<a href="https://github.com" target="_blank">
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground: "new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-center">
<a href="https://dribbble.com" target="_blank">
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="pt-8">
<div class="container lg:w-4/5 mx-auto">
<div class="flex flex-col md:flex-row md:flex-wrap lg:flex-row">
<div class="w-full mb-4 pl-4 lg:w-3/12 md:w-6/12">
<a href="javascript:void(0)" class="block mb-4">
<span class="tracking-wider text-blue-500
font-bold uppercase">Dry Components</span>
</a>
<p class="mb-4 leading-6 text-gray-500 pr-4">
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Ut mollitia, magnam dolor, minima
corrupti alias.
</p>
</div>
<div class="pl-4 mb-4 w-full lg:w-2/12 md:w-6/12">
<h4 class="font-bold uppercase text-blue-500 mb-4
tracking-wide">Company</h4>
<ul>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">How
it works?</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Features</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Pricing</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Blog</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
target="_blank">
Buy this theme
</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">DEVELOPERS</h4>
<ul>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Docs</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Integration</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">API Reference</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Download SDK</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">OTHER LINKS</h4>
<ul>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Privacy Policy</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Terms & Conditions</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Refund Policy</a>
</li>
</ul>
</div>
<div class="pl-4 pr-4 mb-4 w-full md:w-4/12 lg:w-3/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">Newsletter</h4>
<form action="" method="POST" id="newsletter"
class="relative">
<input type="text"
name="email"
id="email"
placeholder="Eg. johndoe@gmail.com"
class="text-sm p-2 w-full block border-2 rounded
border-blue-500">
<button class="absolute bg-blue-500 text-gray-50
w-9 top-1 right-1
rounded h-8">
<i class="fas fa-chevron-right"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-200 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p class="text-gray-500 tracking-wide text-center mt-8 md:mt-0">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
<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-500"
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-500"
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-500"
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-500"
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-500"
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>
</footer>
const Footer = () => {
return (
<footer className="pt-8">
<div className="container lg:w-4/5 mx-auto">
<div className="flex flex-col md:flex-row md:flex-wrap lg:flex-row">
<div className="w-full mb-4 pl-4 lg:w-3/12 md:w-6/12">
<a href="javascript:void(0)" className="block mb-4">
<span
className="tracking-wider text-blue-500
font-bold uppercase"
>
Dry Components
</span>
</a>
<p className="mb-4 leading-6 text-gray-500 pr-4">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut mollitia, magnam dolor, minima corrupti
alias.
</p>
</div>
<div className="pl-4 mb-4 w-full lg:w-2/12 md:w-6/12">
<h4
className="font-bold uppercase text-blue-500 mb-4
tracking-wide"
>
Company
</h4>
<ul>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
How it works?
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Features
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Pricing
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Blog
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
target="_blank"
>
Buy this theme
</a>
</li>
</ul>
</div>
<div className="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4
className="font-bold uppercase tracking-wide
text-blue-500 mb-4"
>
DEVELOPERS
</h4>
<ul>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Docs
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Integration
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
API Reference
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Download SDK
</a>
</li>
</ul>
</div>
<div className="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4
className="font-bold uppercase tracking-wide
text-blue-500 mb-4"
>
OTHER LINKS
</h4>
<ul>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Privacy Policy
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Terms & Conditions
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Refund Policy
</a>
</li>
</ul>
</div>
<div className="pl-4 pr-4 mb-4 w-full md:w-4/12 lg:w-3/12">
<h4
className="font-bold uppercase tracking-wide
text-blue-500 mb-4"
>
Newsletter
</h4>
<form
action
method="POST"
id="newsletter"
className="relative"
>
<input
type="text"
name="email"
id="email"
placeholder="Eg. johndoe@gmail.com"
className="text-sm p-2 w-full block border-2 rounded
border-blue-500"
/>
<button
className="absolute bg-blue-500 text-gray-50
w-9 top-1 right-1
rounded h-8"
>
<i className="fas fa-chevron-right" />
</button>
</form>
</div>
</div>
<div className="border-t border-gray-200 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p className="text-gray-500 tracking-wide text-center mt-8 md:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-center">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-center">
<a href="https://instagram.com" target="_blank">
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-center">
<a href="https://youtube.com" target="_blank">
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-center">
<a href="https://github.com" target="_blank">
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground: "new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-center">
<a href="https://dribbble.com" target="_blank">
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="pt-8 bg-gray-900">
<div class="container lg:w-4/5 mx-auto">
<div class="flex flex-col md:flex-row md:flex-wrap lg:flex-row">
<div class="w-full mb-4 pl-4 lg:w-3/12 md:w-6/12">
<a href="javascript:void(0)" class="block mb-4">
<span class="tracking-wider text-blue-500
font-bold uppercase">Dry Components</span>
</a>
<p class="mb-4 leading-6 text-gray-400 pr-4">
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Ut mollitia, magnam dolor, minima
corrupti alias.
</p>
</div>
<div class="pl-4 mb-4 w-full lg:w-2/12 md:w-6/12">
<h4 class="font-bold uppercase text-blue-500 mb-4
tracking-wide">Company</h4>
<ul>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">How
it works?</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Features</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Pricing</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Blog</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)"
target="_blank">
Buy this theme
</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">DEVELOPERS</h4>
<ul>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Docs</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Integration</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">API Reference</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Download SDK</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">OTHER LINKS</h4>
<ul>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Privacy Policy</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Terms & Conditions</a>
</li>
<li>
<a class="text-gray-400 block mb-2
hover:text-gray-500"
href="javascript:void(0)">Refund Policy</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<a class="text-gray-400 block mb-2" href="javascript:void(0)">
United States
</a>
<a class="text-gray-400 block mb-4" href="javascript:void(0)">
English
</a>
</div>
</div>
<div class="border-t border-gray-700 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p class="text-gray-400 tracking-wide text-center mt-8 md:mt-0">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
<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-500"
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-500"
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-500"
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-500"
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-500"
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>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-900">
<div className="container mx-auto py-4 px-4">
<div className="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b border-gray-600">
<div className="col-span-2 pb-8 xl:pb-0">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-gray-300 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="py-4 text-gray-300 tracking-wide w-4/5">
Making the world a better place through building
reusable components
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-start">
<a
href="https://facebook.com"
target="_blank"
>
<svg
height="100%"
className="h-5 w-5 text-gray-400"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-start">
<a
href="https://instagram.com"
target="_blank"
>
<svg
className="h-5 w-5 text-gray-400"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-start">
<a
href="https://youtube.com"
target="_blank"
>
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-400"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-start">
<a
href="https://github.com"
target="_blank"
>
<svg
height="512px"
className="h-5 w-5 text-gray-400"
fill="currentColor"
id="Layer_1"
style={{
enableBackground:
"new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-start">
<a
href="https://dribbble.com"
target="_blank"
>
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-400"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div className="col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 xl:gap-4">
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Marketing
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Analytics
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Commerce
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Insights
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Support
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Pricing
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Documentation
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Guides
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
API Status
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Company
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
About
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Blog
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Jobs
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Press
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Partners
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
LEGAL
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Claim
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Privacy
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Terms
</a>
</li>
</ul>
</div>
</div>
</div>
<p className="block text-gray-300 tracking-wide py-8 text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved
</p>
</div>
</footer>
);
}
export default Footer;
<footer class="pt-8">
<div class="container lg:w-4/5 mx-auto">
<div class="flex flex-col md:flex-row md:flex-wrap lg:flex-row">
<div class="w-full mb-4 pl-4 lg:w-3/12 md:w-6/12">
<a href="javascript:void(0)" class="block mb-4">
<span class="tracking-wider text-blue-500
font-bold uppercase">Dry Components</span>
</a>
<p class="mb-4 leading-6 text-gray-500 pr-4">
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Ut mollitia, magnam dolor, minima
corrupti alias.
</p>
</div>
<div class="pl-4 mb-4 w-full lg:w-2/12 md:w-6/12">
<h4 class="font-bold uppercase text-blue-500 mb-4
tracking-wide">Company</h4>
<ul>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">How
it works?</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Features</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Pricing</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Blog</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
target="_blank">
Buy this theme
</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">DEVELOPERS</h4>
<ul>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Docs</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Integration</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">API Reference</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Download SDK</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4 class="font-bold uppercase tracking-wide
text-blue-500 mb-4">OTHER LINKS</h4>
<ul>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Privacy Policy</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Terms & Conditions</a>
</li>
<li>
<a class="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)">Refund Policy</a>
</li>
</ul>
</div>
<div class="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<a class="text-gray-500 block mb-2" href="javascript:void(0)">
United States
</a>
<a class="text-gray-500 block mb-4" href="javascript:void(0)">
English
</a>
</div>
</div>
<div class="border-t border-gray-200 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p class="text-gray-500 tracking-wide text-center mt-8 md:mt-0">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
<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-500"
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-500"
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-500"
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-500"
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-500"
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>
</footer>
const Footer = () => {
return (
<footer className="pt-8">
<div className="container lg:w-4/5 mx-auto">
<div className="flex flex-col md:flex-row md:flex-wrap lg:flex-row">
<div className="w-full mb-4 pl-4 lg:w-3/12 md:w-6/12">
<a href="javascript:void(0)" className="block mb-4">
<span
className="tracking-wider text-blue-500
font-bold uppercase"
>
Dry Components
</span>
</a>
<p className="mb-4 leading-6 text-gray-500 pr-4">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut mollitia, magnam dolor, minima corrupti
alias.
</p>
</div>
<div className="pl-4 mb-4 w-full lg:w-2/12 md:w-6/12">
<h4
className="font-bold uppercase text-blue-500 mb-4
tracking-wide"
>
Company
</h4>
<ul>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
How it works?
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Features
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Pricing
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Blog
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
target="_blank"
>
Buy this theme
</a>
</li>
</ul>
</div>
<div className="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4
className="font-bold uppercase tracking-wide
text-blue-500 mb-4"
>
DEVELOPERS
</h4>
<ul>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Docs
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Integration
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
API Reference
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Download SDK
</a>
</li>
</ul>
</div>
<div className="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<h4
className="font-bold uppercase tracking-wide
text-blue-500 mb-4"
>
OTHER LINKS
</h4>
<ul>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Privacy Policy
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Terms & Conditions
</a>
</li>
<li>
<a
className="text-gray-500 block mb-2
hover:text-gray-900"
href="javascript:void(0)"
>
Refund Policy
</a>
</li>
</ul>
</
div>
<div className="pl-4 mb-4 w-full md:w-4/12 lg:w-2/12">
<a
className="text-gray-500 block mb-2"
href="javascript:void(0)"
>
United States
</a>
<a
className="text-gray-500 block mb-4"
href="javascript:void(0)"
>
English
</a>
</div>
</div>
<div className="border-t border-gray-200 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p className="text-gray-500 tracking-wide text-center mt-8 md:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-center">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-center">
<a href="https://instagram.com" target="_blank">
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-center">
<a href="https://youtube.com" target="_blank">
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-center">
<a href="https://github.com" target="_blank">
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground: "new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-center">
<a href="https://dribbble.com" target="_blank">
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-900">
<div class="container mx-auto py-8">
<div class="border-t border-gray-700 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p class="text-gray-400 tracking-wide text-sm text-center mt-8 md:mt-0">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
<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-500"
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-500"
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-500"
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-500"
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-500"
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>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-900">
<div className="container mx-auto py-8">
<div className="border-t border-gray-700 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p className="text-gray-400 tracking-wide text-sm text-center mt-8 md:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-center">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-center">
<a href="https://instagram.com" target="_blank">
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-center">
<a href="https://youtube.com" target="_blank">
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-center">
<a href="https://github.com" target="_blank">
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground: "new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-center">
<a href="https://dribbble.com" target="_blank">
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-100">
<div class="container mx-auto py-8">
<div class="border-t border-gray-200 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p class="text-gray-500 tracking-wide text-sm text-center mt-8 md:mt-0">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
<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-500"
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-500"
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-500"
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-500"
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-500"
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>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-100">
<div className="container mx-auto py-8">
<div className="border-t border-gray-200 flex flex-col-reverse items-center md:flex-row py-8 justify-between">
<p className="text-gray-500 tracking-wide text-sm text-center mt-8 md:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-center">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-center">
<a href="https://instagram.com" target="_blank">
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-center">
<a href="https://youtube.com" target="_blank">
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-center">
<a href="https://github.com" target="_blank">
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground: "new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-center">
<a href="https://dribbble.com" target="_blank">
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-900">
<div class="container mx-auto py-8">
<div class="border-t border-gray-700 flex flex-col py-8 justify-center items-center">
<ul class="flex flex-wrap md:flex-nowrap md:flex-row mb-8">
<li><a class="block py-2 px-4 text-gray-400 font-semibold" href="javascript:void(0)">About</a></li>
<li><a class="block py-2 px-4 text-gray-400 font-semibold" href="javascript:void(0)">Blog</a></li>
<li><a class="block py-2 px-4 text-gray-400 font-semibold" href="javascript:void(0)">Careers</a></li>
<li><a class="block py-2 px-4 text-gray-400 font-semibold" href="javascript:void(0)">Contact</a></li>
<li><a class="block py-2 px-4 text-gray-400 font-semibold" href="javascript:void(0)">Pricing</a></li>
<li><a class="block py-2 px-4 text-gray-400 font-semibold" href="javascript:void(0)">Partners</a></li>
<li><a class="block py-2 px-4 text-gray-400 font-semibold" href="javascript:void(0)">Press</a></li>
</ul>
<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-500"
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-500"
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-500"
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-500"
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-500"
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>
<p class="block mt-4 text-gray-400 tracking-wide py-2 text-sm text-center">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
</div>
</div>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-900">
<div className="container mx-auto py-8">
<div className="border-t border-gray-700 flex flex-col py-8 justify-center items-center">
<ul className="flex flex-wrap md:flex-nowrap md:flex-row mb-8">
<li>
<a
className="block py-2 px-4 text-gray-400 font-semibold"
href="javascript:void(0)"
>
About
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-400 font-semibold"
href="javascript:void(0)"
>
Blog
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-400 font-semibold"
href="javascript:void(0)"
>
Careers
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-400 font-semibold"
href="javascript:void(0)"
>
Contact
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-400 font-semibold"
href="javascript:void(0)"
>
Pricing
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-400 font-semibold"
href="javascript:void(0)"
>
Partners
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-400 font-semibold"
href="javascript:void(0)"
>
Press
</a>
</li>
</ul>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-center">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-center">
<a href="https://instagram.com" target="_blank">
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-center">
<a href="https://youtube.com" target="_blank">
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-center">
<a href="https://github.com" target="_blank">
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground: "new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-center">
<a href="https://dribbble.com" target="_blank">
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
<p className="block mt-4 text-gray-400 tracking-wide py-2 text-sm text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-100">
<div class="container mx-auto py-8">
<div class="border-t border-gray-200 flex flex-col py-8 justify-center items-center">
<ul class="flex flex-wrap md:flex-nowrap md:flex-row mb-8">
<li><a class="block py-2 px-4 text-gray-500 font-semibold" href="javascript:void(0)">About</a></li>
<li><a class="block py-2 px-4 text-gray-500 font-semibold" href="javascript:void(0)">Blog</a></li>
<li><a class="block py-2 px-4 text-gray-500 font-semibold" href="javascript:void(0)">Careers</a></li>
<li><a class="block py-2 px-4 text-gray-500 font-semibold" href="javascript:void(0)">Contact</a></li>
<li><a class="block py-2 px-4 text-gray-500 font-semibold" href="javascript:void(0)">Pricing</a></li>
<li><a class="block py-2 px-4 text-gray-500 font-semibold" href="javascript:void(0)">Partners</a></li>
<li><a class="block py-2 px-4 text-gray-500 font-semibold" href="javascript:void(0)">Press</a></li>
</ul>
<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-500"
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-500"
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-500"
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-500"
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-500"
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>
<p class="block mt-4 text-gray-500 tracking-wide py-2 text-sm text-center">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
</div>
</div>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-100">
<div className="container mx-auto py-8">
<div className="border-t border-gray-200 flex flex-col py-8 justify-center items-center">
<ul className="flex flex-wrap md:flex-nowrap md:flex-row mb-8">
<li>
<a
className="block py-2 px-4 text-gray-500 font-semibold"
href="javascript:void(0)"
>
About
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-500 font-semibold"
href="javascript:void(0)"
>
Blog
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-500 font-semibold"
href="javascript:void(0)"
>
Careers
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-500 font-semibold"
href="javascript:void(0)"
>
Contact
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-500 font-semibold"
href="javascript:void(0)"
>
Pricing
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-500 font-semibold"
href="javascript:void(0)"
>
Partners
</a>
</li>
<li>
<a
className="block py-2 px-4 text-gray-500 font-semibold"
href="javascript:void(0)"
>
Press
</a>
</li>
</ul>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-center">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-center">
<a href="https://instagram.com" target="_blank">
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-center">
<a href="https://youtube.com" target="_blank">
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-center">
<a href="https://github.com" target="_blank">
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground: "new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-center">
<a href="https://dribbble.com" target="_blank">
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
<p className="block mt-4 text-gray-500 tracking-wide py-2 text-sm text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-900">
<div class="container mx-auto py-8">
<div class="border-t border-gray-700 flex flex-col py-8 justify-center items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-gray-500 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p class="block mt-4 text-gray-400 tracking-wide py-2 text-sm text-center">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
<ul class="flex flex-wrap justify-center flex-row mt-8">
<li><a class="block py-2 px-4 text-sm text-gray-500 font-semibold" href="javascript:void(0)">Privacy Policy</a></li>
<li class="hidden md:block px-4 font-thin text-gray-400">|</li>
<li><a class="block py-2 px-4 text-sm text-gray-500 font-semibold" href="javascript:void(0)">Terms & Conditions</a></li>
<li class="hidden md:block px-4 font-thin text-gray-400">|</li>
<li><a class="block py-2 px-4 text-sm text-gray-500 font-semibold" href="javascript:void(0)">Cookie Policy</a></li>
</ul>
</div>
</div>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-900">
<div className="container mx-auto py-8">
<div className="border-t border-gray-700 flex flex-col py-8 justify-center items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-gray-500 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="block mt-4 text-gray-400 tracking-wide py-2 text-sm text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
<ul className="flex flex-wrap justify-center flex-row mt-8">
<li>
<a
className="block py-2 px-4 text-sm text-gray-500 font-semibold"
href="javascript:void(0)"
>
Privacy Policy
</a>
</li>
<li className="hidden md:block px-4 font-thin text-gray-400">
|
</li>
<li>
<a
className="block py-2 px-4 text-sm text-gray-500 font-semibold"
href="javascript:void(0)"
>
Terms & Conditions
</a>
</li>
<li className="hidden md:block px-4 font-thin text-gray-400">
|
</li>
<li>
<a
className="block py-2 px-4 text-sm text-gray-500 font-semibold"
href="javascript:void(0)"
>
Cookie Policy
</a>
</li>
</ul>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-100">
<div class="container mx-auto py-8">
<div class="border-t border-gray-200 flex flex-col py-8 justify-center items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-gray-500 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p class="block mt-4 text-gray-500 tracking-wide py-2 text-sm text-center">Copyright © 2022 Drycomponents Inc. All Right reserved.</p>
<ul class="flex flex-wrap justify-center flex-row mt-8">
<li><a class="block py-2 px-4 text-sm text-gray-500 font-semibold" href="javascript:void(0)">Privacy Policy</a></li>
<li class="hidden md:block px-4 font-thin text-gray-400">|</li>
<li><a class="block py-2 px-4 text-sm text-gray-500 font-semibold" href="javascript:void(0)">Terms & Conditions</a></li>
<li class="hidden md:block px-4 font-thin text-gray-400">|</li>
<li><a class="block py-2 px-4 text-sm text-gray-500 font-semibold" href="javascript:void(0)">Cookie Policy</a></li>
</ul>
</div>
</div>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-100">
<div className="container mx-auto py-8">
<div className="border-t border-gray-200 flex flex-col py-8 justify-center items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-gray-500 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="block mt-4 text-gray-500 tracking-wide py-2 text-sm text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
<ul className="flex flex-wrap justify-center flex-row mt-8">
<li>
<a
className="block py-2 px-4 text-sm text-gray-500 font-semibold"
href="javascript:void(0)"
>
Privacy Policy
</a>
</li>
<li className="hidden md:block px-4 font-thin text-gray-400">
|
</li>
<li>
<a
className="block py-2 px-4 text-sm text-gray-500 font-semibold"
href="javascript:void(0)"
>
Terms & Conditions
</a>
</li>
<li className="hidden md:block px-4 font-thin text-gray-400">
|
</li>
<li>
<a
className="block py-2 px-4 text-sm text-gray-500 font-semibold"
href="javascript:void(0)"
>
Cookie Policy
</a>
</li>
</ul>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-900">
<div class="container mx-auto py-4 px-4">
<div class="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b border-gray-600">
<div class="col-span-4 pb-4 xl:pb-0">
<div class="pb-6">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Solutions
</h3>
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Marketing</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Analytics</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Commerce</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Insights</a
>
</li>
</ul>
</div>
<div class="pb-6">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Support
</h3>
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Pricing</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Documentation</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Guides</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>API Status</a
>
</li>
</ul>
</div>
<div class="pb-6">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Company
</h3>
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>About</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Blog</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Jobs</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Press</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Partners</a
>
</li>
</ul>
</div>
<div class="pb-6">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
LEGAL
</h3>
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Claim</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Privacy</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Terms</a
>
</li>
</ul>
</div>
</div>
<div class="col-span-2 flex flex-col">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-gray-300 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p class="py-4 text-gray-300 tracking-wide w-4/5">
Making the world a better place through building reusable components
</p>
<div class="w-72">
<ul class="grid grid-cols-5 gap-4">
<li class="flex flex-row justify-start">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
class="h-5 w-5 text-gray-400"
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-start">
<a href="https://instagram.com" target="_blank">
<svg
class="h-5 w-5 text-gray-400"
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-start">
<a href="https://youtube.com" target="_blank">
<svg
enable-background="new 0 0 32 32"
class="h-5 w-5 text-gray-400"
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-start">
<a href="https://github.com" target="_blank">
<svg
height="512px"
class="h-5 w-5 text-gray-400"
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-start">
<a href="https://dribbble.com" target="_blank">
<svg
enable-background="new 0 0 56.693 56.693"
class="h-5 w-5 text-gray-400"
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>
<div class="flex flex-col lg:flex-row justify-between py-4">
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Privacy Policy</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Terms & Conditions</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Cookie Policy</a
>
</li>
</ul>
<p class="block text-gray-300 tracking-wide py-1 text-center mt-4 lg:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved
</p>
</div>
</div>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-900">
<div className="container mx-auto py-4 px-4">
<div className="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b border-gray-600">
<div className="col-span-4 pb-4 xl:pb-0">
<div className="pb-6">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Marketing
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Analytics
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Commerce
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Insights
</a>
</li>
</ul>
</div>
<div className="pb-6">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Support
</h3>
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Pricing
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Documentation
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Guides
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
API Status
</a>
</li>
</ul>
</div>
<div className="pb-6">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Company
</h3>
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
About
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Blog
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Jobs
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Press
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Partners
</a>
</li>
</ul>
</div>
<div className="pb-6">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
LEGAL
</h3>
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Claim
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Privacy
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Terms
</a>
</li>
</ul>
</div>
</div>
<div className="col-span-2 flex flex-col">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-gray-300 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="py-4 text-gray-300 tracking-wide w-4/5">
Making the world a better place through building
reusable components
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-start">
<a
href="https://facebook.com"
target="_blank"
>
<svg
height="100%"
className="h-5 w-5 text-gray-400"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-start">
<a
href="https://instagram.com"
target="_blank"
>
<svg
className="h-5 w-5 text-gray-400"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-start">
<a
href="https://youtube.com"
target="_blank"
>
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-400"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-start">
<a
href="https://github.com"
target="_blank"
>
<svg
height="512px"
className="h-5 w-5 text-gray-400"
fill="currentColor"
id="Layer_1"
style={{
enableBackground:
"new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-start">
<a
href="https://dribbble.com"
target="_blank"
>
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-400"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="flex flex-col lg:flex-row justify-between py-4">
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Privacy Policy
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Terms & Conditions
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Cookie Policy
</a>
</li>
</ul>
<p className="block text-gray-300 tracking-wide py-1 text-center mt-4 lg:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved
</p>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-100">
<div class="container mx-auto py-4 px-4">
<div class="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b">
<div class="col-span-4 pb-4 xl:pb-0">
<div class="pb-6">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Solutions
</h3>
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Marketing</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Analytics</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Commerce</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Insights</a
>
</li>
</ul>
</div>
<div class="pb-6">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Support
</h3>
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Pricing</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Documentation</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Guides</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>API Status</a
>
</li>
</ul>
</div>
<div class="pb-6">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Company
</h3>
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>About</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Blog</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Jobs</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Press</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Partners</a
>
</li>
</ul>
</div>
<div class="pb-6">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
LEGAL
</h3>
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Claim</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Privacy</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Terms</a
>
</li>
</ul>
</div>
</div>
<div class="col-span-2 flex flex-col">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-gray-500 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p class="py-4 text-gray-500 tracking-wide w-4/5">
Making the world a better place through building reusable components
</p>
<div class="w-72">
<ul class="grid grid-cols-5 gap-4">
<li class="flex flex-row justify-start">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
class="h-5 w-5 text-gray-500"
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-start">
<a href="https://instagram.com" target="_blank">
<svg
class="h-5 w-5 text-gray-500"
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-start">
<a href="https://youtube.com" target="_blank">
<svg
enable-background="new 0 0 32 32"
class="h-5 w-5 text-gray-500"
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-start">
<a href="https://github.com" target="_blank">
<svg
height="512px"
class="h-5 w-5 text-gray-500"
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-start">
<a href="https://dribbble.com" target="_blank">
<svg
enable-background="new 0 0 56.693 56.693"
class="h-5 w-5 text-gray-500"
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>
<div class="flex flex-col lg:flex-row justify-between py-4">
<ul class="mt-2 flex flex-col sm:flex-row">
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Privacy Policy</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Terms & Conditions</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>Cookie Policy</a
>
</li>
</ul>
<p class="block text-gray-500 tracking-wide py-1 text-center mt-4 lg:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved
</p>
</div>
</div>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-100">
<div className="container mx-auto py-4 px-4">
<div className="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b">
<div className="col-span-4 pb-4 xl:pb-0">
<div className="pb-6">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Marketing
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Analytics
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Commerce
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Insights
</a>
</li>
</ul>
</div>
<div className="pb-6">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Support
</h3>
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Pricing
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Documentation
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Guides
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
API Status
</a>
</li>
</ul>
</div>
<div className="pb-6">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Company
</h3>
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
About
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Blog
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Jobs
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Press
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Partners
</a>
</li>
</ul>
</div>
<div className="pb-6">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
LEGAL
</h3>
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Claim
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Privacy
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Terms
</a>
</li>
</ul>
</div>
</div>
<div className="col-span-2 flex flex-col">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-gray-500 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="py-4 text-gray-500 tracking-wide w-4/5">
Making the world a better place through building
reusable components
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-start">
<a
href="https://facebook.com"
target="_blank"
>
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-start">
<a
href="https://instagram.com"
target="_blank"
>
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-start">
<a
href="https://youtube.com"
target="_blank"
>
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-start">
<a
href="https://github.com"
target="_blank"
>
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground:
"new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-start">
<a
href="https://dribbble.com"
target="_blank"
>
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="flex flex-col lg:flex-row justify-between py-4">
<ul className="mt-2 flex flex-col sm:flex-row">
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Privacy Policy
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Terms & Conditions
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1 pr-4"
href="javascript:void(0);"
>
Cookie Policy
</a>
</li>
</ul>
<p className="block text-gray-500 tracking-wide py-1 text-center mt-4 lg:mt-0">
Copyright © 2022 Drycomponents Inc. All Right reserved
</p>
</div>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-900">
<div class="container mx-auto py-4 px-4">
<div class="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b border-gray-600">
<div class="col-span-2 pb-8 xl:pb-0">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-gray-300 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p class="py-4 text-gray-300 tracking-wide w-4/5">
Making the world a better place through building reusable components
</p>
<div class="w-72">
<ul class="grid grid-cols-5 gap-4">
<li class="flex flex-row justify-start">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
class="h-5 w-5 text-gray-400"
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-start">
<a href="https://instagram.com" target="_blank">
<svg
class="h-5 w-5 text-gray-400"
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-start">
<a href="https://youtube.com" target="_blank">
<svg
enable-background="new 0 0 32 32"
class="h-5 w-5 text-gray-400"
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-start">
<a href="https://github.com" target="_blank">
<svg
height="512px"
class="h-5 w-5 text-gray-400"
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-start">
<a href="https://dribbble.com" target="_blank">
<svg
enable-background="new 0 0 56.693 56.693"
class="h-5 w-5 text-gray-400"
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="col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 xl:gap-4">
<div class="pb-8 xl:pb-0">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Solutions
</h3>
<ul class="mt-4">
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Marketing</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Analytics</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Commerce</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Insights</a
>
</li>
</ul>
</div>
<div class="pb-8 xl:pb-0">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Support
</h3>
<ul class="mt-4">
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Pricing</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Documentation</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Guides</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>API Status</a
>
</li>
</ul>
</div>
<div class="pb-8 xl:pb-0">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Company
</h3>
<ul class="mt-4">
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>About</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Blog</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Jobs</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Press</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Partners</a
>
</li>
</ul>
</div>
<div class="pb-8 xl:pb-0">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
LEGAL
</h3>
<ul class="mt-4">
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Claim</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Privacy</a
>
</li>
<li>
<a
class="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>Terms</a
>
</li>
</ul>
</div>
</div>
</div>
<p class="block text-gray-300 tracking-wide py-8 text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved
</p>
</div>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-900">
<div className="container mx-auto py-4 px-4">
<div className="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b border-gray-600">
<div className="col-span-2 pb-8 xl:pb-0">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-gray-300 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="py-4 text-gray-300 tracking-wide w-4/5">
Making the world a better place through building
reusable components
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-start">
<a
href="https://facebook.com"
target="_blank"
>
<svg
height="100%"
className="h-5 w-5 text-gray-400"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-start">
<a
href="https://instagram.com"
target="_blank"
>
<svg
className="h-5 w-5 text-gray-400"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-start">
<a
href="https://youtube.com"
target="_blank"
>
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-400"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-start">
<a
href="https://github.com"
target="_blank"
>
<svg
height="512px"
className="h-5 w-5 text-gray-400"
fill="currentColor"
id="Layer_1"
style={{
enableBackground:
"new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-start">
<a
href="https://dribbble.com"
target="_blank"
>
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-400"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div className="col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 xl:gap-4">
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Marketing
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Analytics
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Commerce
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Insights
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Support
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Pricing
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Documentation
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Guides
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
API Status
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Company
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
About
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Blog
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Jobs
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Press
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Partners
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
LEGAL
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Claim
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Privacy
</a>
</li>
<li>
<a
className="block text-gray-300 tracking-wide py-1"
href="javascript:void(0);"
>
Terms
</a>
</li>
</ul>
</div>
</div>
</div>
<p className="block text-gray-300 tracking-wide py-8 text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved
</p>
</div>
</footer>
);
}
export default Footer;
<footer class="bg-gray-100">
<div class="container mx-auto py-4 px-4">
<div class="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b">
<div class="col-span-2 pb-8 xl:pb-0">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-gray-500 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p class="py-4 text-gray-500 tracking-wide w-4/5">
Making the world a better place through building reusable components
</p>
<div class="w-72">
<ul class="grid grid-cols-5 gap-4">
<li class="flex flex-row justify-start">
<a href="https://facebook.com" target="_blank">
<svg
height="100%"
class="h-5 w-5 text-gray-500"
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-start">
<a href="https://instagram.com" target="_blank">
<svg
class="h-5 w-5 text-gray-500"
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-start">
<a href="https://youtube.com" target="_blank">
<svg
enable-background="new 0 0 32 32"
class="h-5 w-5 text-gray-500"
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-start">
<a href="https://github.com" target="_blank">
<svg
height="512px"
class="h-5 w-5 text-gray-500"
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-start">
<a href="https://dribbble.com" target="_blank">
<svg
enable-background="new 0 0 56.693 56.693"
class="h-5 w-5 text-gray-500"
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="col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 xl:gap-4">
<div class="pb-8 xl:pb-0">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Solutions
</h3>
<ul class="mt-4">
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Marketing</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Analytics</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Commerce</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Insights</a
>
</li>
</ul>
</div>
<div class="pb-8 xl:pb-0">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Support
</h3>
<ul class="mt-4">
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Pricing</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Documentation</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Guides</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>API Status</a
>
</li>
</ul>
</div>
<div class="pb-8 xl:pb-0">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
Company
</h3>
<ul class="mt-4">
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>About</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Blog</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Jobs</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Press</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Partners</a
>
</li>
</ul>
</div>
<div class="pb-8 xl:pb-0">
<h3
class="text-gray-400 text-sm font-bold tracking-wider uppercase"
>
LEGAL
</h3>
<ul class="mt-4">
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Claim</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Privacy</a
>
</li>
<li>
<a
class="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>Terms</a
>
</li>
</ul>
</div>
</div>
</div>
<p class="block text-gray-500 tracking-wide py-8 text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
</div>
</footer>
const Footer = () => {
return (
<footer className="bg-gray-100">
<div className="container mx-auto py-4 px-4">
<div className="grid grid-cols-1 xl:grid-cols-6 gap-2 xl:gap-4 py-8 border-b">
<div className="col-span-2 pb-8 xl:pb-0">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8 text-gray-500 inline-block"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="py-4 text-gray-500 tracking-wide w-4/5">
Making the world a better place through building
reusable components
</p>
<div className="w-72">
<ul className="grid grid-cols-5 gap-4">
<li className="flex flex-row justify-start">
<a
href="https://facebook.com"
target="_blank"
>
<svg
height="100%"
className="h-5 w-5 text-gray-500"
fill="currentColor"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2,
}}
version="1.1"
viewBox="0 0 512 512"
width="100%"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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={{ fillRule: "nonzero" }}
/>
</svg>
</a>
</li>
<li className="flex flex-row justify-start">
<a
href="https://instagram.com"
target="_blank"
>
<svg
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 56.7 56.7"
enableBackground="new 0 0 56.7 56.7"
xmlSpace="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 className="flex flex-row justify-start">
<a
href="https://youtube.com"
target="_blank"
>
<svg
enableBackground="new 0 0 32 32"
className="h-5 w-5 text-gray-500"
fill="currentColor"
version="1.1"
viewBox="0 0 32 32"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="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 className="flex flex-row justify-start">
<a
href="https://github.com"
target="_blank"
>
<svg
height="512px"
className="h-5 w-5 text-gray-500"
fill="currentColor"
id="Layer_1"
style={{
enableBackground:
"new 0 0 512 512",
}}
version="1.1"
viewBox="0 0 512 512"
width="512px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g>
<path
className="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 className="flex flex-row justify-start">
<a
href="https://dribbble.com"
target="_blank"
>
<svg
enableBackground="new 0 0 56.693 56.693"
className="h-5 w-5 text-gray-500"
fill="currentColor"
height="56.693px"
id="Layer_1"
version="1.1"
viewBox="0 0 56.693 56.693"
width="56.693px"
xmlSpace="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
clipRule="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"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div className="col-span-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 xl:gap-4">
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Marketing
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Analytics
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Commerce
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Insights
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Support
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Pricing
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Documentation
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Guides
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
API Status
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
Company
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
About
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Blog
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Jobs
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Press
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Partners
</a>
</li>
</ul>
</div>
<div className="pb-8 xl:pb-0">
<h3 className="text-gray-400 text-sm font-bold tracking-wider uppercase">
LEGAL
</h3>
<ul className="mt-4">
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Claim
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Privacy
</a>
</li>
<li>
<a
className="block text-gray-500 tracking-wide py-1"
href="javascript:void(0);"
>
Terms
</a>
</li>
</ul>
</div>
</div>
</div>
<p className="block text-gray-500 tracking-wide py-8 text-center">
Copyright © 2022 Drycomponents Inc. All Right reserved.
</p>
</div>
</footer>
);
}
export default Footer;