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

Refactor contact to card

Browse Source
This commit is contained in:
Moris Zen
2018-09-12 11:42:14 +02:00
parent 1966676638
commit c56862d876
3 changed files with 79 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Card.js
View File

@@ -5,7 +5,7 @@ import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
const Card = ({ ...props }) => ( const Card = ({ ...props }) => (
<article <article
className={`h-full w-full rounded overflow-hidden bg-white ${!props.teamMember && className={`h-full w-full rounded overflow-hidden bg-white ${!props.unshadowed &&
'border-bottom-saburly hover:shadow'}`} 'border-bottom-saburly hover:shadow'}`}
> >
<div className={`relative ${!props.team ? 'hover:opacity-50' : ''}`}> <div className={`relative ${!props.team ? 'hover:opacity-50' : ''}`}>
@@ -28,6 +28,7 @@ const Card = ({ ...props }) => (
)} )}
</div> </div>
</div> </div>
{props.children}
</article> </article>
) )

20
src/pages/about.js
View File

@@ -63,34 +63,34 @@ const AboutPage = () => (
</Fade> </Fade>
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full"> <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Moris} title="Moris Pasic" /> <Card team unshadowed teamMember={Moris} title="Moris Pasic" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Senad} title="Senad Uka" /> <Card team unshadowed teamMember={Senad} title="Senad Uka" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Edin} title="Edin Dazdarevic" /> <Card team unshadowed teamMember={Edin} title="Edin Dazdarevic" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Mediha} title="Mediha Zukic" /> <Card team unshadowed teamMember={Mediha} title="Mediha Zukic" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Mirna} title="Mirna Milic" /> <Card team unshadowed teamMember={Mirna} title="Mirna Milic" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Nina} title="Nina Juresic" /> <Card team unshadowed teamMember={Nina} title="Nina Juresic" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Bilal} title="Bilal Catic" /> <Card team unshadowed teamMember={Bilal} title="Bilal Catic" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Almira} title="Almira Krdzic" /> <Card team unshadowed teamMember={Almira} title="Almira Krdzic" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Mickey} title="Miralem Halilovic" /> <Card team unshadowed teamMember={Mickey} title="Miralem Halilovic" />
</div> </div>
<div className="md:w-1/3 p-2"> <div className="md:w-1/3 p-2">
<Card team teamMember={Nedim} title="Nedim Uka" /> <Card team unshadowed teamMember={Nedim} title="Nedim Uka" />
</div> </div>
</div> </div>
</section> </section>

147
src/pages/contact.js
View File

@@ -3,6 +3,7 @@ import React from 'react'
import SectionIntro from '../components/SectionIntro' import SectionIntro from '../components/SectionIntro'
import PageIntro from '../components/PageIntro' import PageIntro from '../components/PageIntro'
import Fade from 'react-reveal/Fade' import Fade from 'react-reveal/Fade'
import Card from '../components/Card'
import ContactImage from '../images/saburly-web-agency.jpg' import ContactImage from '../images/saburly-web-agency.jpg'
import Sarajevo from '../images/sarajevo-web-agency.jpg' import Sarajevo from '../images/sarajevo-web-agency.jpg'
@@ -22,93 +23,79 @@ const ContactPage = () => (
imgClasses="-mb-12 border-white rounded-lg" imgClasses="-mb-12 border-white rounded-lg"
/> />
<section className="container mx-auto my-12 p-4"> <section className="my-20 container mx-auto w-full md:flex w-full">
<div className="md:flex"> <div className="p-2">
<Fade left> <Fade left>
<div className="p-2 text-center"> <Card team teamMember={Stockholm} title="OFFICE IN STOCKHOLM">
<div className="rounded overflow-hidden border-bottom-saburly"> <div className="xsm:flex text-left justify-around text-black text-base p-4">
<img className="w-full" src={Stockholm} alt="Stockholm City" /> <div className="py-2">
<div className="px-6 py-4"> <h4 className="text-black">Adress</h4>
<div className="uppercase font-medium text-xl mb-6"> <p className="text-black-light font-serif">
office in Stockholm Saburly AB <br />
</div> Vretenvägen 13 <br />
<div className="md:flex text-left justify-around text-black text-base"> 171 54 Solna <br />
<div> Sweden <br />
<h4 className="text-black">Adress</h4> </p>
<p className="text-black-light"> </div>
Saburly AB <br /> <div className="py-2">
Vretenvägen 13 <br /> <h4 className="text-black">Contact</h4>
171 54 Solna <br /> <p className="font-serif text-black-light">
Sweden <br /> Phone:{' '}
</p> <a
</div> className="saburly-color hover:text-purple-light no-underline"
<div> href="tel:+46760477717"
<h4 className="text-black">Contact</h4> >
<p className="text-black-light"> +46760477717
Phone:{' '} </a>
<a <br />
className="saburly-color hover:text-purple-light no-underline" E-mail:{' '}
href="tel:+46760477717" <a
> className="saburly-color hover:text-purple-light no-underline"
+46760477717 href="mailto:sweden@saburly.com"
</a> >
<br /> sweden@saburly.com
E-mail:{' '} </a>{' '}
<a </p>
className="saburly-color hover:text-purple-light no-underline"
href="mailto:sweden@saburly.com"
>
sweden@saburly.com
</a>{' '}
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </Card>
</Fade> </Fade>
</div>
<div className="p-2">
<Fade right> <Fade right>
<div className="p-2 text-center"> <Card team teamMember={Sarajevo} title="OFFICE IN SARAJEVO">
<div className="rounded overflow-hidden border-bottom-saburly"> <div className="xsm:flex text-left justify-around text-base p-4">
<img className="w-full" src={Sarajevo} alt="Sarajevo City" /> <div className="py-2">
<div className="px-6 py-4"> <h4 className="text-black">Adress</h4>
<div className="uppercase font-medium text-xl mb-6"> <p className="font-serif text-black-light">
office in Sarajevo Saburly d.o.o <br />
</div> Hakije Turajlica 2 <br />
<div className="md:flex text-left justify-around text-base"> 71 000 Sarajevo <br />
<div> Bosnia & Herzegovina <br />
<h4 className="text-black">Adress</h4> </p>
<p className="text-black-light"> </div>
Saburly d.o.o <br /> <div className="py-2">
Hakije Turajlica 2 <br /> <h4 className="text-black">Contact</h4>
71 000 Sarajevo <br /> <p className="font-serif text-black-light">
Bosnia & Herzegovina <br /> Phone:{' '}
</p> <a
</div> className="saburly-color hover:text-purple-light no-underline"
<div> href="tel:+38761909238"
<h4 className="text-black">Contact</h4> >
<p className="text-black-light"> +38761909238
Phone:{' '} </a>{' '}
<a <br />
className="saburly-color hover:text-purple-light no-underline" E-mail:{' '}
href="tel:+38761909238" <a
> className="saburly-color hover:text-purple-light no-underline"
+38761909238 href="mailto:bosnia@saburly.com"
</a>{' '} >
<br /> bosnia@saburly.com
E-mail:{' '} </a>{' '}
<a </p>
className="saburly-color hover:text-purple-light no-underline"
href="mailto:bosnia@saburly.com"
>
bosnia@saburly.com
</a>{' '}
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </Card>
</Fade> </Fade>
</div> </div>
</section> </section>