Restructuring and styling of footer

This commit is contained in:
Moris Zen
2018-07-05 13:32:53 +02:00
parent edaecfffca
commit b5334fb4ff

View File

@@ -14,9 +14,9 @@ let menuClasses =
const Footer = () => (
<footer className="bg-indigo-darker">
<div className="container mx-auto pt-10 pb-10 lg:flex">
<div className="container mx-auto pt-10 lg:flex">
<div className="lg:w-1/4 p-4">
<img src={LogoSaburly} alt="Saburly Logo" className="max-w-full" />
<img src={LogoSaburly} alt="Saburly Logo" className="w-full" />
<div className="flex justify-between social-icons py-2">
<div>
<img
@@ -47,34 +47,24 @@ const Footer = () => (
/>
</div>
</div>
<a
className="opacity-70 hover:opacity-100 pb-1 no-underline text-white block"
href="mailto:info@saburly.com"
>
E-mail: info@saburly.com
</a>
<a
className="opacity-70 hover:opacity-100 pt-1 no-underline text-white block"
href="tel:+46760477717"
>
Phone: +46760477717
</a>
<div>
<a
className="text-center lg:text-left opacity-70 hover:opacity-100 py-4 lg:py-1 text-xl lg:text-sm no-underline text-white block"
href="mailto:info@saburly.com"
>
E-mail: info@saburly.com
</a>
<a
className="text-center text-xl lg:text-sm lg:text-left opacity-70 hover:opacity-100 no-underline text-white block"
href="tel:+46760477717"
>
Phone: +46760477717
</a>
</div>
</div>
<div className="lg:w-3/4 ml-10 p-4">
<div className="lg:flex items-center justify-around">
<h3 className="text-white font-light">
Let's start a new project together
</h3>
<Button
text="Contact Us"
standard
classes="rounded-full text-white hover:shadow"
url="/contact"
/>
</div>
<div className="mt-4 lg:flex justify-between">
<div className="p-4 text-center lg:text-left sm:flex justify-between">
<nav>
<p className="font-thin text-white opacity-50">Sitemap</p>
<ul className="list-reset text-sm inline-block">
@@ -108,6 +98,14 @@ const Footer = () => (
</div>
</div>
</div>
<div className="sm:flex items-center text-center justify-center pb-8">
<Button
text="Say Hello"
standard
classes="rounded-full text-white hover:shadow mx-2"
url="/contact"
/>
</div>
</footer>
)