senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add social media and styling footer

Browse Source
This commit is contained in:
Moris Zen
2018-07-05 12:59:28 +02:00
parent 6dc175c126
commit edaecfffca
9 changed files with 262 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/Footer.js
View File

@@ -4,6 +4,11 @@ import Button from './Button'
import LogoSaburly from '../images/logo-saburly-colorful.svg'
import Facebook from '../images/facebook.svg'
import Instagram from '../images/instagram.svg'
import Twitter from '../images/twitter.svg'
import LinkedIn from '../images/linkedin.svg'
let menuClasses =
'no-underline mt-4 lg:inline-block opacity-100 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
@@ -12,12 +17,52 @@ const Footer = () => (
<div className="container mx-auto pt-10 pb-10 lg:flex">
<div className="lg:w-1/4 p-4">
<img src={LogoSaburly} alt="Saburly Logo" className="max-w-full" />
<a href="mailto:info@saburly.com">E: info@saburly.com</a>
<a href="tel:+46760477717">P: +46760477717</a>
<div className="flex justify-between social-icons py-2">
<div>
<img
src={Facebook}
alt="Facebook Social Media"
className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
/>
</div>
<div>
<img
src={Instagram}
alt="Instagram Social Media"
className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
/>
</div>
<div>
<img
src={Twitter}
alt="Twitter Social Media"
className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
/>
</div>
<div>
<img
src={LinkedIn}
alt="LinkedIn Social Media"
className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
/>
</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>
<div className="lg:w-3/4 ml-10 p-4">
<div className="lg:flex items-center justify-between">
<div className="lg:flex items-center justify-around">
<h3 className="text-white font-light">
Let's start a new project together
</h3>
@@ -31,7 +76,7 @@ const Footer = () => (
<div className="mt-4 lg:flex justify-between">
<nav>
<p className="font-thin text-white opacity-70">Sitemap</p>
<p className="font-thin text-white opacity-50">Sitemap</p>
<ul className="list-reset text-sm inline-block">
<Link className="block my-2" to="/">
<li className={menuClasses}>Home</li>
@@ -48,14 +93,14 @@ const Footer = () => (
</ul>
</nav>
<div>
<p className="font-thin text-white opacity-70">Office - Sweden</p>
<p className="text-white my-2 leading-normal">
<p className="font-thin text-white opacity-50">Office - Sweden</p>
<p className="text-white my-2 opacity-80 leading-normal">
Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
</p>
</div>
<div>
<p className="font-thin text-white opacity-70">Office - Bosnia</p>
<p className="text-white my-2 leading-normal">
<p className="font-thin text-white opacity-50">Office - Bosnia</p>
<p className="text-white my-2 opacity-80 leading-normal">
Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
& Herzegovina
</p>