Skip to content

Commit

Permalink
contact page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ardaerzin
ardaerzin committed Mar 1, 2021
1 parent 569b1db commit 0deaf50
Show file tree
Hide file tree
Showing 4 changed files with 265 additions and 9 deletions.
71 changes: 71 additions & 0 deletions Components/Contact/ContactForm.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import MyInput from 'Components/Common/Form/input'
import Button from 'Components/Common/Button'
import FormBase from 'Components/Common/Form'

const ContactForm = props => {
return (
<FormBase
initialValues={{ fName: '', lName: '', email: '', message: '' }}
onSubmit={(values, { setSubmitting }) => {
// add submit action here
}}
validate={values => {
const errors = {}
if (!values.email) {
errors.email = 'Required'
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address'
}

if (!values.fName) {
errors.fName = 'Required'
}
if (!values.lName) {
errors.lName = 'Required'
}
if (!values.message) {
errors.message = 'Required'
}
return errors
}}
>
<MyInput
id='fName'
type='text'
name='fName'
label='first name'
placeholder='your first name'
/>
<MyInput
id='lName'
type='text'
name='lName'
label='last name'
placeholder='your last name'
/>
<MyInput
id='email'
type='email'
name='email'
label='email'
placeholder='your email address'
/>
<MyInput
variant='textarea'
id='message'
name='message'
label='your message'
placeholder='why do you want to contact me?'
/>
<Button type='submit'>
<span className='text-sm font-display'>
send message
</span>
</Button>
</FormBase>
)
}

export default ContactForm
38 changes: 38 additions & 0 deletions Components/Contact/IconItem.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import PropTypes from 'prop-types'

const ContactIconItem = ({ icon: Icon, text, color, ...rest }) => {
return (
<div
className={`
flex flex-col
items-center
space-y-4
text-${color}
p-2
`}
>
<div className={`rounded-full p-8 bg-${color}`}>
<Icon
className='text-2xl md:text-4xl lg:text-6xl'
color='#fff'
/>
</div>
<span
className='
font-body
text-md text-gray-500 text-center text-lg max-w-header-prose
'
>
{text}
</span>
</div>
)
}

ContactIconItem.propTypes = {
icon: PropTypes.func,
text: PropTypes.string,
color: PropTypes.string
}

export default ContactIconItem
50 changes: 50 additions & 0 deletions Components/Contact/SuperpeerService.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import Button from 'Components/Common/Button'
import CardItem from 'Components/Common/Card'
import PropTypes from 'prop-types'

const SuperpeerServiceItem = ({ icon: Icon, description, title, url, ...rest }) => {
return (
<CardItem
className='
flex-grow flex-col
items-start
p-6
space-y-4
'
>
<div className='flex flex-row items-center space-x-2'>
<Icon className='text-4xl' />
<h3
className='
text-2xl
font-display font-semibold
'
>
{title}
</h3>
</div>
<p
className='
font-body
text-sm text-gray-500
'
>
{description}
</p>
<Button>
<span className='text-xs font-display'>
book now
</span>
</Button>
</CardItem>
)
}

SuperpeerServiceItem.propTypes = {
title: PropTypes.string,
url: PropTypes.string,
description: PropTypes.string,
icon: PropTypes.func
}

export default SuperpeerServiceItem
115 changes: 106 additions & 9 deletions pages/contact.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
import { HeroDescription, HeroTextSection } from 'Components/Common/HeroComponents'
import { GiTeacher, GiGlobe, GiMailbox, GiPositionMarker } from 'react-icons/gi'
import SuperpeerServiceItem from 'Components/Contact/SuperpeerService'
import { HeroHeader, SectionHeader } from 'Components/Common/Headers'
import ContactIconItem from 'Components/Contact/IconItem'
import ContactForm from 'Components/Contact/ContactForm'
import CommonSection from 'Components/Common/Section'
import BlogPostList from 'Components/Blog/PostList'
import Button from 'Components/Common/Button'
import CardItem from 'Components/Common/Card'
import Page from 'Components/Common/Page'
import PropTypes from 'prop-types'
import Button from 'Components/Common/Button'
import Image from 'next/image'
import { HiOutlinePresentationChartLine } from 'react-icons/hi'
import { IoConstruct } from 'react-icons/io5'

const Contact = ({ posts, ...rest }) => {
return (
<Page>
<CommonSection
className='lg:space-x-16 space-y-8 lg:space-y-0 pb-0 md:pb-0 lg:pb-0'
className='lg:space-x-16 space-y-8 lg:space-y-0'
>
<img
src='/undraw/converse.svg'
Expand All @@ -35,16 +42,106 @@ const Contact = ({ posts, ...rest }) => {
</HeroTextSection>
</CommonSection>

<CommonSection>
<SectionHeader>
first contact
</SectionHeader>
<CommonSection
className='
grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4
gap-x-8 gap-y-8
'
>
<ContactIconItem
icon={GiMailbox}
text="you'll get my email address after your initial contact request"
color='accent1'
/>
<ContactIconItem
icon={GiPositionMarker}
text="I am located in Berlin, and always willing to have a coffee with you"
color='accent2'
/>
<ContactIconItem
icon={GiGlobe}
text="available globally thanks to all those digital tools"
color='accent3'
/>
<ContactIconItem
icon={GiGlobe}
text="available globally thanks to all those digital tools"
color='accent4'
/>
</CommonSection>

<CommonSection>
<CommonSection className='md:flex-row md:space-x-8 md:space-y-0 space-y-8'>
<div className='flex flex-col space-y-4'>
<SectionHeader>
<span className='text-accent4'>first</span> contact
</SectionHeader>
<div className='flex flex-col flex-shrink font-body text-lg max-w-prose space-y-1'>
<span>
if you haven't contacted me before, use this form to get my attention. if I believe I can help you, we'll then schedule an online meeting to talk about your questions in depth.
</span>
<span id='discount' className='text-sm text-gray-500'>
* discount codes for 1-1 sessions are available. please mention any discount requests in the contact form here.
</span>
</div>
</div>
<CardItem
className='
flex flex-col flex-grow
w-full max-w-full md:max-w-md
p-6
'
>
<ContactForm />
</CardItem>
</CommonSection>

<CommonSection className='lg:flex-col space-y-4'>
<SectionHeader>
future comm
<span className='text-accent4'>future</span> comm
</SectionHeader>
<div className='flex flex-row font-body text-lg space-x-2'>
<div className='relative w-16 h-16 rounded-lg overflow-hidden'>
<Image
src='/images/superpeer.png'
layout='fill'
alt='superpeer logo'
/>
</div>
<div className='max-w-prose space-y-1 flex flex-col'>
<p>
due to covid restrictions and to ensure global availability, all future communications will take place on the <a href='https://superpeer.com' target='_blank' rel='noreferrer' className='underline'>Superpeer</a> platform.
</p>
<span className='text-sm text-gray-500'>
* discount codes <a href='#discount' className='underline'>are available.</a>
</span>
</div>
</div>
<div
className='
grid grid-cols-3 gap-x-4
w-full
pt-4
'
>
<SuperpeerServiceItem
title='lean mentorship'
duration='45 mins'
icon={GiTeacher}
description='Ea cupidatat ipsum cupidatat irure minim. Consectetur sunt commodo nisi aliqua laborum nulla magna fugiat pariatur quis laboris aliqua. Commodo ad non mollit ullamco reprehenderit labore nisi velit anim. Exercitation ad et deserunt sit aliqua ex minim. Amet enim minim deserunt incididunt ea sint aliquip non adipisicing qui laboris tempor ex mollit. Culpa adipisicing irure voluptate aute officia id nisi amet. Magna ut minim veniam pariatur minim cillum occaecat sunt culpa laboris nulla.'
/>
<SuperpeerServiceItem
title='deck review'
duration='45mins'
icon={HiOutlinePresentationChartLine}
description='Laboris aute ea nulla consequat labore veniam consectetur. Reprehenderit aute consequat ipsum ut occaecat anim fugiat. Lorem duis fugiat et irure irure.'
/>
<SuperpeerServiceItem
title='mvp review'
duration='45mins'
icon={IoConstruct}
description='Reprehenderit elit amet laborum nulla duis ex ut. Ut eiusmod officia ad nostrud cillum veniam enim commodo. Ut id nostrud tempor dolor elit proident ullamco enim. Consequat ad non quis laboris eu Lorem. Occaecat consectetur ullamco labore id cupidatat eiusmod mollit consectetur commodo adipisicing. Voluptate minim sit nisi anim cillum. Aliqua labore culpa aliquip aute fugiat tempor sit.'
/>
</div>
</CommonSection>
</Page>
)
Expand Down

0 comments on commit 0deaf50

Please sign in to comment.