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

Restructuring and styling of components

Browse Source
This commit is contained in:
Moris Zen
2018-07-05 11:15:44 +02:00
parent bcc6a948cb
commit 6dc175c126
9 changed files with 253 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/Footer.js
View File

@@ -5,34 +5,64 @@ import Button from './Button'
import LogoSaburly from '../images/logo-saburly-colorful.svg'
let menuClasses =
'no-underline mt-4 lg:inline-block opacity-75 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
'no-underline mt-4 lg:inline-block opacity-100 lg:mt-0 text-white hover:opacity-100 uppercase mr-4'
const Footer = () => (
<footer className="bg-indigo-darker">
<img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
<p className="text-white font-light">
Nam imperdiet et massa ut lacinia. Praesent nec sem ut sem efficitur
imperdiet.
</p>
<h4>Home</h4>
<ul className="text-sm">
<Link to="/services">
<li className={menuClasses}>What We Do</li>
</Link>
<Link to="/about">
<li className={menuClasses}>TEAM</li>
</Link>
<Link to="/blog">
<li className={menuClasses}>BLOG</li>
</Link>
</ul>
<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>
<Button
text="Contact Us"
standard
classes="rounded-full text-white hover:shadow"
url="/contact"
/>
<div className="lg:w-3/4 ml-10 p-4">
<div className="lg:flex items-center justify-between">
<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">
<nav>
<p className="font-thin text-white opacity-70">Sitemap</p>
<ul className="list-reset text-sm inline-block">
<Link className="block my-2" to="/">
<li className={menuClasses}>Home</li>
</Link>
<Link className="block my-2" to="/services">
<li className={menuClasses}>What We Do</li>
</Link>
<Link className="block my-2" to="/about">
<li className={menuClasses}>TEAM</li>
</Link>
<Link className="block my-2" to="/blog">
<li className={menuClasses}>BLOG</li>
</Link>
</ul>
</nav>
<div>
<p className="font-thin text-white opacity-70">Office - Sweden</p>
<p className="text-white my-2 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">
Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
& Herzegovina
</p>
</div>
</div>
</div>
</div>
</footer>
)