135 lines
4.5 KiB
JavaScript
135 lines
4.5 KiB
JavaScript
import React from 'react'
|
|
import Link from 'gatsby-link'
|
|
import Button from './Button'
|
|
|
|
import LogoSaburly from '../images/saburly-logo-w.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 lg:inline-block lg:mt-0 text-white hover:opacity-100 uppercase'
|
|
|
|
const Footer = () => (
|
|
<footer className="saburly-main-bg">
|
|
<div className="text-center py-4 lg:px-4 saburly-overlay-shadow">
|
|
<Link className="no-underline text-white" to="/contact">
|
|
<div
|
|
className="p-2 items-center text-white leading-none lg:rounded-full flex lg:inline-flex"
|
|
role="alert"
|
|
>
|
|
<span className="flex bg-teal hover:bg-teal-dark saburly-transition rounded-full uppercase px-3 py-2 text-xs mr-3">
|
|
Let's Connect
|
|
</span>
|
|
<span className="mr-2 hover:opacity-80 saburly-transition text-left flex-auto">
|
|
Tell us about your project and get a free proposal
|
|
</span>
|
|
<svg
|
|
className="fill-current opacity-75 h-4 w-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
|
|
</svg>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div className="container mx-auto my-4 lg:flex">
|
|
<div className="lg:w-1/4 p-4">
|
|
<img
|
|
src={LogoSaburly}
|
|
alt="Saburly Logo"
|
|
className="w-full opacity-80"
|
|
/>
|
|
<div className="flex justify-between social-icons py-2">
|
|
<div>
|
|
<a
|
|
href="https://facebook.com/saburly"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
src={Facebook}
|
|
alt="Facebook Social Media"
|
|
className="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="https://instagram.com/saburly"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
src={Instagram}
|
|
alt="Instagram Social Media"
|
|
className="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="https://twitter.com/saburly"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
src={Twitter}
|
|
alt="Twitter Social Media"
|
|
className="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a
|
|
href="https://www.linkedin.com/company/saburly/"
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
src={LinkedIn}
|
|
alt="LinkedIn Social Media"
|
|
className="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:w-3/4">
|
|
<div className="p-4 text-center lg:text-left sm:flex justify-around">
|
|
<nav>
|
|
<p className="font-thin text-white opacity-80">Sitemap</p>
|
|
<ul className="list-reset text-sm inline-block">
|
|
<Link className="block my-2 hover:opacity-70" to="/">
|
|
<li className={menuClasses}>Home</li>
|
|
</Link>
|
|
<Link className="block my-2 hover:opacity-70" to="/services">
|
|
<li className={menuClasses}>Services</li>
|
|
</Link>
|
|
<Link className="block my-2 hover:opacity-70" to="/about">
|
|
<li className={menuClasses}>About us</li>
|
|
</Link>
|
|
<Link className="block my-2 hover:opacity-70" to="/contact">
|
|
<li className={menuClasses}>Contact</li>
|
|
</Link>
|
|
</ul>
|
|
</nav>
|
|
<div>
|
|
<p className="font-thin text-white opacity-80">Office - Bosnia</p>
|
|
<p className="text-white my-2 leading-normal">
|
|
Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
|
|
& Herzegovina
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
|
|
export default Footer
|