Contact us new #565
Contact us new #565
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/pages/contact-us.js
Outdated
| import EmailLink from '../components/EmailLink' | ||
| const ContactUs = () => ( | ||
| <Layout> | ||
| <PageMeta title="Contact us" description="Enter in suitable description" /> |
There was a problem hiding this comment.
Did you need to enter in a suitable description here? 😄
src/pages/contact-us.js
Outdated
| <img src={Twitter} height={42} width={42}></img> | ||
|
|
||
| <Text color="#561dee" size="normal"> | ||
| <h4>@neontribe</h4> |
There was a problem hiding this comment.
Should this be a heading? There is some good guidance on how and where to use headings in Mozilla docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes
| </Text> | ||
| <VerticalSpacing size={3}></VerticalSpacing> | ||
| <Container justifyContent="flex-start"> | ||
| <Text color="#561dee"> |
There was a problem hiding this comment.
Because I am a nerd and love using all the html elements, here would be a nice place to use the <address> element, which is specifically for the purpose of indicating the address details of an person or organisation. Totally optional fun added extra, you can checkout the docs here - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
| <a href={link}>{children}</a> | ||
|
|
||
| <style jsx>{` | ||
| div { |
There was a problem hiding this comment.
Putting this styling on the <div> rather than the <a> will mean there's an area inside the div that looks clickable, but isn't.
| connect: PropTypes.string, | ||
| link: PropTypes.string.isRequired, | ||
| children: PropTypes.node, | ||
| border_color: PropTypes.string, | ||
| background: PropTypes.string, | ||
| margin_left: PropTypes.string, | ||
| mobileSize: PropTypes.string, |
| </div> | ||
|
|
||
| <EmailLink | ||
| link="/" |
There was a problem hiding this comment.
Should this be a mailto:hello?
| <Text size="normal" color="black" maxCharacter="49ch"> | ||
| Follow us on Twitter | ||
| </Text> | ||
|
|
||
| <div className="social-media-container"> | ||
| <div className="social-media-labels"> | ||
| <img src={Twitter} height={42} width={42}></img> | ||
|
|
||
| <Text color="#561dee" size="normal"> | ||
| @neontribe | ||
| </Text> | ||
| </div> |
There was a problem hiding this comment.
Should there be a link to Twitter here? "Follow us on Twitter" sounds like a call to action, but there isn't anything to interact with. We can also help out screen readers with an alt attribute on the image.
| margin-right: 10vh; | ||
| width: 15vh; |
There was a problem hiding this comment.
I think using vertical height to style horizontally can have some unexpected effects, especially on large monitors.
| <Container justifyContent="flex-start"> | ||
| <Text color="#561dee"> | ||
| <address> | ||
| <p>21 Colegate </p> |
There was a problem hiding this comment.
This is the old address, the new one is Norwich Office, Unit B, Seymour House, 30-34 Muspole Street, Norwich, NR3 1DJ
Create contact page that matched design:
#557