Refactor contact to card
This commit is contained in:
Moris Zen
@@ -5,7 +5,7 @@ import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
|
||||
|
||||
const Card = ({ ...props }) => (
|
||||
<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'}`}
|
||||
>
|
||||
<div className={`relative ${!props.team ? 'hover:opacity-50' : ''}`}>
|
||||
@@ -28,6 +28,7 @@ const Card = ({ ...props }) => (
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{props.children}
|
||||
</article>
|
||||
)
|
||||
|
||||
|
||||
@@ -63,34 +63,34 @@ const AboutPage = () => (
|
||||
</Fade>
|
||||
<div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
|
||||
<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 className="md:w-1/3 p-2">
|
||||
<Card team teamMember={Senad} title="Senad Uka" />
|
||||
<Card team unshadowed teamMember={Senad} title="Senad Uka" />
|
||||
</div>
|
||||
<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 className="md:w-1/3 p-2">
|
||||
<Card team teamMember={Mediha} title="Mediha Zukic" />
|
||||
<Card team unshadowed teamMember={Mediha} title="Mediha Zukic" />
|
||||
</div>
|
||||
<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 className="md:w-1/3 p-2">
|
||||
<Card team teamMember={Nina} title="Nina Juresic" />
|
||||
<Card team unshadowed teamMember={Nina} title="Nina Juresic" />
|
||||
</div>
|
||||
<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 className="md:w-1/3 p-2">
|
||||
<Card team teamMember={Almira} title="Almira Krdzic" />
|
||||
<Card team unshadowed teamMember={Almira} title="Almira Krdzic" />
|
||||
</div>
|
||||
<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 className="md:w-1/3 p-2">
|
||||
<Card team teamMember={Nedim} title="Nedim Uka" />
|
||||
<Card team unshadowed teamMember={Nedim} title="Nedim Uka" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,6 +3,7 @@ import React from 'react'
|
||||
import SectionIntro from '../components/SectionIntro'
|
||||
import PageIntro from '../components/PageIntro'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import Card from '../components/Card'
|
||||
|
||||
import ContactImage from '../images/saburly-web-agency.jpg'
|
||||
import Sarajevo from '../images/sarajevo-web-agency.jpg'
|
||||
@@ -22,93 +23,79 @@ const ContactPage = () => (
|
||||
imgClasses="-mb-12 border-white rounded-lg"
|
||||
/>
|
||||
|
||||
<section className="container mx-auto my-12 p-4">
|
||||
<div className="md:flex">
|
||||
<section className="my-20 container mx-auto w-full md:flex w-full">
|
||||
<div className="p-2">
|
||||
<Fade left>
|
||||
<div className="p-2 text-center">
|
||||
<div className="rounded overflow-hidden border-bottom-saburly">
|
||||
<img className="w-full" src={Stockholm} alt="Stockholm City" />
|
||||
<div className="px-6 py-4">
|
||||
<div className="uppercase font-medium text-xl mb-6">
|
||||
office in Stockholm
|
||||
</div>
|
||||
<div className="md:flex text-left justify-around text-black text-base">
|
||||
<div>
|
||||
<h4 className="text-black">Adress</h4>
|
||||
<p className="text-black-light">
|
||||
Saburly AB <br />
|
||||
Vretenvägen 13 <br />
|
||||
171 54 Solna <br />
|
||||
Sweden <br />
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-black">Contact</h4>
|
||||
<p className="text-black-light">
|
||||
Phone:{' '}
|
||||
<a
|
||||
className="saburly-color hover:text-purple-light no-underline"
|
||||
href="tel:+46760477717"
|
||||
>
|
||||
+46760477717
|
||||
</a>
|
||||
<br />
|
||||
E-mail:{' '}
|
||||
<a
|
||||
className="saburly-color hover:text-purple-light no-underline"
|
||||
href="mailto:sweden@saburly.com"
|
||||
>
|
||||
sweden@saburly.com
|
||||
</a>{' '}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Card team teamMember={Stockholm} title="OFFICE IN STOCKHOLM">
|
||||
<div className="xsm:flex text-left justify-around text-black text-base p-4">
|
||||
<div className="py-2">
|
||||
<h4 className="text-black">Adress</h4>
|
||||
<p className="text-black-light font-serif">
|
||||
Saburly AB <br />
|
||||
Vretenvägen 13 <br />
|
||||
171 54 Solna <br />
|
||||
Sweden <br />
|
||||
</p>
|
||||
</div>
|
||||
<div className="py-2">
|
||||
<h4 className="text-black">Contact</h4>
|
||||
<p className="font-serif text-black-light">
|
||||
Phone:{' '}
|
||||
<a
|
||||
className="saburly-color hover:text-purple-light no-underline"
|
||||
href="tel:+46760477717"
|
||||
>
|
||||
+46760477717
|
||||
</a>
|
||||
<br />
|
||||
E-mail:{' '}
|
||||
<a
|
||||
className="saburly-color hover:text-purple-light no-underline"
|
||||
href="mailto:sweden@saburly.com"
|
||||
>
|
||||
sweden@saburly.com
|
||||
</a>{' '}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Fade>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<Fade right>
|
||||
<div className="p-2 text-center">
|
||||
<div className="rounded overflow-hidden border-bottom-saburly">
|
||||
<img className="w-full" src={Sarajevo} alt="Sarajevo City" />
|
||||
<div className="px-6 py-4">
|
||||
<div className="uppercase font-medium text-xl mb-6">
|
||||
office in Sarajevo
|
||||
</div>
|
||||
<div className="md:flex text-left justify-around text-base">
|
||||
<div>
|
||||
<h4 className="text-black">Adress</h4>
|
||||
<p className="text-black-light">
|
||||
Saburly d.o.o <br />
|
||||
Hakije Turajlica 2 <br />
|
||||
71 000 Sarajevo <br />
|
||||
Bosnia & Herzegovina <br />
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-black">Contact</h4>
|
||||
<p className="text-black-light">
|
||||
Phone:{' '}
|
||||
<a
|
||||
className="saburly-color hover:text-purple-light no-underline"
|
||||
href="tel:+38761909238"
|
||||
>
|
||||
+38761909238
|
||||
</a>{' '}
|
||||
<br />
|
||||
E-mail:{' '}
|
||||
<a
|
||||
className="saburly-color hover:text-purple-light no-underline"
|
||||
href="mailto:bosnia@saburly.com"
|
||||
>
|
||||
bosnia@saburly.com
|
||||
</a>{' '}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Card team teamMember={Sarajevo} title="OFFICE IN SARAJEVO">
|
||||
<div className="xsm:flex text-left justify-around text-base p-4">
|
||||
<div className="py-2">
|
||||
<h4 className="text-black">Adress</h4>
|
||||
<p className="font-serif text-black-light">
|
||||
Saburly d.o.o <br />
|
||||
Hakije Turajlica 2 <br />
|
||||
71 000 Sarajevo <br />
|
||||
Bosnia & Herzegovina <br />
|
||||
</p>
|
||||
</div>
|
||||
<div className="py-2">
|
||||
<h4 className="text-black">Contact</h4>
|
||||
<p className="font-serif text-black-light">
|
||||
Phone:{' '}
|
||||
<a
|
||||
className="saburly-color hover:text-purple-light no-underline"
|
||||
href="tel:+38761909238"
|
||||
>
|
||||
+38761909238
|
||||
</a>{' '}
|
||||
<br />
|
||||
E-mail:{' '}
|
||||
<a
|
||||
className="saburly-color hover:text-purple-light no-underline"
|
||||
href="mailto:bosnia@saburly.com"
|
||||
>
|
||||
bosnia@saburly.com
|
||||
</a>{' '}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Fade>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user