Contact page form from guidelines
This commit is contained in:
Moris Zen
@@ -1,81 +1,144 @@
|
||||
import React from 'react'
|
||||
|
||||
import SectionIntro from '../components/SectionIntro'
|
||||
import PageIntro from '../components/PageIntro'
|
||||
|
||||
import ContactImage from '../images/contact-web-agency.svg'
|
||||
import Sarajevo from '../images/sarajevo-web-agency.jpg'
|
||||
import Stockholm from '../images/stockholm-web-agency.jpg'
|
||||
import FormImage from '../images/contact-web-consultancy.svg'
|
||||
|
||||
const ContactPage = () => (
|
||||
<div>
|
||||
<PageIntro
|
||||
intro="Contact"
|
||||
headline="Let's connect"
|
||||
text="and build something awesome together"
|
||||
sectionClasses="mb-16 lg:mb-8"
|
||||
headline="Where to find us"
|
||||
text="We are always on a lookout for exciting challenges and new contacts. If you want to start something great or just find out more about what we do, send us a message. Reinventing your presence in the connected world is just a few characters away"
|
||||
sectionClasses="lg:mb-8"
|
||||
image={ContactImage}
|
||||
imgClasses="-mb-20 lg:-mt-12"
|
||||
/>
|
||||
|
||||
<section className="container mx-auto my-12 p-4">
|
||||
<form className="p-6 w-1/2">
|
||||
<div className="flex flex-wrap -mx-3">
|
||||
<div className="w-full md:w-1/2 p-3">
|
||||
<label
|
||||
className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
|
||||
for="grid-first-name"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4"
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
<div className="md:flex">
|
||||
<div className="p-2 text-center">
|
||||
<div className="rounded overflow-hidden shadow">
|
||||
<img className="w-full" src={Sarajevo} alt="Sarajevo City" />
|
||||
<div className="px-6 py-4">
|
||||
<div className="font-normal text-xl mb-2">
|
||||
Saburly Office in Sarajevo
|
||||
</div>
|
||||
<p className="md:flex text-left justify-around text-grey-darker text-base">
|
||||
<div>
|
||||
<h4>Adress</h4>
|
||||
Saburly d.o.o <br />
|
||||
Hakije Turajlica 2 <br />
|
||||
71 000 Sarajevo <br />
|
||||
Bosnia & Herzegovina <br />
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
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>{' '}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2 text-center">
|
||||
<div className="rounded overflow-hidden shadow">
|
||||
<img className="w-full" src={Stockholm} alt="Stockholm City" />
|
||||
<div className="px-6 py-4">
|
||||
<div className="font-normal text-xl mb-2">
|
||||
Saburly Office in Stockholm
|
||||
</div>
|
||||
<p className="md:flex text-left justify-around text-grey-darker text-base">
|
||||
<div>
|
||||
<h4>Adress</h4>
|
||||
Saburly AB <br />
|
||||
Vretenvägen 13 <br />
|
||||
171 54 Solna <br />
|
||||
Sweden <br />
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
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>{' '}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="w-full md:w-1/2 p-3">
|
||||
<label
|
||||
className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
|
||||
for="grid-first-name"
|
||||
>
|
||||
E-mail
|
||||
</label>
|
||||
<input
|
||||
className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4"
|
||||
id="grid-last-name"
|
||||
type="email"
|
||||
placeholder="name@domain.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<section className="bg-contact-form">
|
||||
<form className="mx-auto pt-16 p-6 max-w-md">
|
||||
<SectionIntro headline="Let's Connect" light />
|
||||
<div className="flex flex-wrap">
|
||||
<input
|
||||
className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="w-full p-3">
|
||||
<label
|
||||
className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
|
||||
for="grid-first-name"
|
||||
>
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4"
|
||||
id="grid-last-name"
|
||||
type="text"
|
||||
placeholder="Message..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
required
|
||||
/>
|
||||
|
||||
<textarea
|
||||
className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
|
||||
id="grid-last-name"
|
||||
type="text"
|
||||
placeholder="Message..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="w-full shadow bg-teal hover:bg-teal-light text-white font-bold py-2 px-4 rounded"
|
||||
className="mt-4 shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
|
||||
type="submit"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="w-1/2">
|
||||
<p>Request a Proposal</p>
|
||||
<p>Request a Video Call</p>
|
||||
<p>Old-fashioned phone calls work as well: - +...</p>
|
||||
</div>
|
||||
<img
|
||||
src={FormImage}
|
||||
alt="Contact Form Image"
|
||||
className="text-center block m-x-auto md:max-w-lg mx-auto"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user