Add revealing effects on components
This commit is contained in:
Moris Zen
@@ -2,6 +2,7 @@ import React from 'react'
|
||||
|
||||
import SectionIntro from '../components/SectionIntro'
|
||||
import PageIntro from '../components/PageIntro'
|
||||
import Fade from 'react-reveal/fade'
|
||||
|
||||
import ContactImage from '../images/saburly-web-agency.jpg'
|
||||
import Sarajevo from '../images/sarajevo-web-agency.jpg'
|
||||
@@ -12,155 +13,163 @@ import PageTransition from 'gatsby-plugin-page-transitions'
|
||||
|
||||
const ContactPage = () => (
|
||||
<PageTransition>
|
||||
<PageIntro
|
||||
tiltImage
|
||||
headline="Let's make it happen"
|
||||
text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
|
||||
sectionClasses="lg:mb-8"
|
||||
image={ContactImage}
|
||||
imgClasses="-mb-12 border-white border-8 rounded"
|
||||
/>
|
||||
<Fade top>
|
||||
<PageIntro
|
||||
tiltImage
|
||||
headline="Let's make it happen"
|
||||
text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
|
||||
sectionClasses="lg:mb-8"
|
||||
image={ContactImage}
|
||||
imgClasses="-mb-12 border-white border-8 rounded"
|
||||
/>
|
||||
</Fade>
|
||||
|
||||
<section className="container mx-auto my-12 p-4">
|
||||
<div className="md:flex">
|
||||
<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>
|
||||
<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>
|
||||
<h4 className="text-black">Contact</h4>
|
||||
<p className="text-black-light">
|
||||
Phone:{' '}
|
||||
<a
|
||||
className="text-purple-dark hover:text-purple-light no-underline"
|
||||
href="tel:+46760477717"
|
||||
>
|
||||
+46760477717
|
||||
</a>
|
||||
<br />
|
||||
E-mail:{' '}
|
||||
<a
|
||||
className="text-purple-dark hover:text-purple-light no-underline"
|
||||
href="mailto:sweden@saburly.com"
|
||||
>
|
||||
sweden@saburly.com
|
||||
</a>{' '}
|
||||
</p>
|
||||
<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="text-purple-dark hover:text-purple-light no-underline"
|
||||
href="tel:+46760477717"
|
||||
>
|
||||
+46760477717
|
||||
</a>
|
||||
<br />
|
||||
E-mail:{' '}
|
||||
<a
|
||||
className="text-purple-dark hover:text-purple-light no-underline"
|
||||
href="mailto:sweden@saburly.com"
|
||||
>
|
||||
sweden@saburly.com
|
||||
</a>{' '}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</Fade>
|
||||
<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>
|
||||
<h4 className="text-black">Contact</h4>
|
||||
<p className="text-black-light">
|
||||
Phone:{' '}
|
||||
<a
|
||||
className="text-purple-dark hover:text-purple-light no-underline"
|
||||
href="tel:+38761909238"
|
||||
>
|
||||
+38761909238
|
||||
</a>{' '}
|
||||
<br />
|
||||
E-mail:{' '}
|
||||
<a
|
||||
className="text-purple-dark hover:text-purple-light no-underline"
|
||||
href="mailto:bosnia@saburly.com"
|
||||
>
|
||||
bosnia@saburly.com
|
||||
</a>{' '}
|
||||
</p>
|
||||
<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="text-purple-dark hover:text-purple-light no-underline"
|
||||
href="tel:+38761909238"
|
||||
>
|
||||
+38761909238
|
||||
</a>{' '}
|
||||
<br />
|
||||
E-mail:{' '}
|
||||
<a
|
||||
className="text-purple-dark hover:text-purple-light no-underline"
|
||||
href="mailto:bosnia@saburly.com"
|
||||
>
|
||||
bosnia@saburly.com
|
||||
</a>{' '}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="bg-saburly-lighter p-8">
|
||||
<section className="container lg:flex justify-between mx-auto">
|
||||
<form
|
||||
action="https://formspree.io/info@saburly.com"
|
||||
className="w-full max-w-sm mx-auto pt-16 p-6"
|
||||
method="POST"
|
||||
>
|
||||
<SectionIntro headline="Send us a message" />
|
||||
<div className="md:flex flex-wrap">
|
||||
<input
|
||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
name="name"
|
||||
required
|
||||
/>
|
||||
<Fade>
|
||||
<section className="container lg:flex justify-between mx-auto">
|
||||
<form
|
||||
action="https://formspree.io/info@saburly.com"
|
||||
className="w-full max-w-sm mx-auto pt-16 p-6"
|
||||
method="POST"
|
||||
>
|
||||
<SectionIntro headline="Send us a message" />
|
||||
<div className="md:flex flex-wrap">
|
||||
<input
|
||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
name="name"
|
||||
required
|
||||
/>
|
||||
|
||||
<input
|
||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
name="_replyto"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
name="_replyto"
|
||||
required
|
||||
/>
|
||||
|
||||
<textarea
|
||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
|
||||
id="grid-last-name"
|
||||
type="text"
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
required
|
||||
<textarea
|
||||
className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
|
||||
id="grid-last-name"
|
||||
type="text"
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
|
||||
value="Send"
|
||||
type="submit"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
<div>
|
||||
<img
|
||||
src={FormImage}
|
||||
alt="Contact Form Image"
|
||||
className="p-10 w-full text-center block md:max-w-lg mx-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
|
||||
value="Send"
|
||||
type="submit"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
<div>
|
||||
<img
|
||||
src={FormImage}
|
||||
alt="Contact Form Image"
|
||||
className="p-10 w-full text-center block md:max-w-lg mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</Fade>
|
||||
</div>
|
||||
</PageTransition>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user