Skip to content

Commit 9e6b330

Browse files
carms-ngcarms-ng
committed
[UPD] Contact Section Styled and ready to be wird
1 parent 65114e1 commit 9e6b330

File tree

5 files changed

+173
-42
lines changed

5 files changed

+173
-42
lines changed

‎src/assets/images/map.png

26.6 KB
Loading

‎src/components/button.js

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from 'styled-components';
33
import { Trans } from 'gatsby-plugin-react-i18next';
44
import PDF from '../assets/pdfs/placeholder.pdf';
55

6-
export default function CallToAction() {
6+
function CallToAction() {
77
return (
88
<ButtonStyle>
99
<a href={PDF} target="_blank" rel="noreferrer" className="px-4 md:px-6 py-2 text-lg md:text-xl">
@@ -12,19 +12,31 @@ export default function CallToAction() {
1212
</ButtonStyle>
1313
)
1414
}
15+
16+
function ButtonRed({ type, text, className, style }) {
17+
return (
18+
<ButtonStyle>
19+
<button type={type} className={`px-4 md:px-6 py-2 text-lg md:text-xl ${className ? className : ""}`} style={style}>{text}</button>
20+
</ButtonStyle>
21+
)
22+
}
23+
24+
export { CallToAction, ButtonRed };
25+
1526
const ButtonStyle = styled.div`
1627
transform: skew(-16deg);
17-
a {
28+
a, button {
1829
white-space: nowrap;
1930
display: block;
2031
background-color: var(--red);
2132
color: var(--white);
22-
transition: rotate 0.3s ease;
33+
transition: rotate 0.5s ease;
2334
letter-spacing: 1px;
2435
&:hover {
2536
cursor: pointer;
2637
transform: rotate(-8deg);
2738
color: var(--white) !important;
2839
}
2940
}
30-
`
41+
`
42+

‎src/components/contact.js

Lines changed: 142 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,36 @@ import * as React from "react"
22
import { graphql, useStaticQuery } from 'gatsby';
33
import { Trans } from 'gatsby-plugin-react-i18next';
44
import styled from 'styled-components';
5-
// import Img from 'gatsby-image';
5+
import Img from 'gatsby-image';
66

77
import SiteBorderStyles from '../styles/SiteBorderStyles';
88
import Footer from "./footer";
99

10-
const ContactStyles = styled.section`
11-
display: flex;
12-
flex-direction: column;
13-
justify-content: space-between;
14-
`;
10+
import { AiTwotoneMail, AiOutlineMail, AiTwotonePhone } from 'react-icons/ai';
11+
import { BsFillPersonFill } from 'react-icons/bs'
12+
import { FiMapPin } from 'react-icons/fi'
13+
import { ButtonRed } from "./button";
1514

1615
export default function Contact() {
16+
const handleFocus = (ev) => {
17+
const input = ev.currentTarget;
18+
const group = input.parentElement;
19+
const label = group.firstChild;
20+
label.classList.add("activated");
21+
group.classList.add("focused");
22+
input.addEventListener('blur', () => {
23+
if (input.value === "") {
24+
label.classList.remove("activated");
25+
}
26+
group.classList.remove("focused");
27+
});
28+
}
29+
1730
const data = useStaticQuery(graphql`
1831
query {
19-
fileName: file(relativePath: { eq: "montreal.png" }) {
32+
fileName: file(relativePath: { eq: "map.png" }) {
2033
childImageSharp {
21-
fluid(maxWidth: 2000, quality: 80) {
34+
fluid(maxWidth: 1000, quality: 80) {
2235
...GatsbyImageSharpFluid
2336
}
2437
}
@@ -28,39 +41,135 @@ export default function Contact() {
2841

2942
return (
3043
<ContactStyles>
31-
<SiteBorderStyles className="flex flex-col">
44+
<SiteBorderStyles>
3245
{/* section-header */}
33-
<div className="text-left md:text-center py-4 md:py-16 lg:py-24">
46+
<div className="text-left md:text-center py-4 md:py-12">
3447
<h2 className="text-3xl lg:text-4xl">
3548
<span className="highlight-red">
36-
<Trans>Contact</Trans>
49+
<Trans>Connect</Trans>
3750
</span>
38-
<Trans> Us</Trans>
51+
<Trans> With Us</Trans>
3952
</h2>
40-
</div>
41-
{/* TODO: Wire Contact Font */}
42-
<form name="contact" method="POST" data-netlify="true">
43-
<p>
44-
<label>Your Name: <input type="text" name="name" /></label>
53+
<p className="hidden md:block text-xl lg:text-2xl my-4">
54+
<Trans>Have a Project? Interested in Joining Force?</Trans>
4555
</p>
46-
<p>
47-
<label>Your Email: <input type="email" name="email" /></label>
48-
</p>
49-
<p>
50-
<label>Interested in? <select name="role[]" multiple>
51-
<option value="Retain Us">Retain Us</option>
52-
<option value="Join Us">Join Us</option>
53-
</select></label>
54-
</p>
55-
<p>
56-
<label>Message: <textarea name="message"></textarea></label>
57-
</p>
58-
<p>
59-
<button type="submit">Send</button>
60-
</p>
61-
</form>
56+
</div>
57+
<div style={{ maxWidth: `900px`, margin: `0 auto` }}>
58+
{/* Contact Info */}
59+
<div className="flex md:pb-12">
60+
<a href="https://goo.gl/maps/Jx8ShmSyBMQUtPko8" className="flex-1 flex md:flex-col items-center md:text-center p-4 text-md md:text-xl">
61+
<FiMapPin className="text-3xl m-2 md:mb-4" />
62+
<Trans>123 Sherbrooke Street, Quebec City, Quebec, Canada</Trans>
63+
</a>
64+
<a href="mailto:info@coderbunker.ca" className="hidden md:flex flex-1 flex-col items-center p-4 text-md md:text-xl">
65+
<AiTwotoneMail className="text-3xl md:mb-4" />
66+
info@coderbunker.ca
67+
</a>
68+
<div href="#" className="hidden md:flex flex-1 flex-col items-center p-4 text-lg md:text-xl">
69+
<AiTwotonePhone className="text-3xl md:mb-4" />
70+
+1 (418) 000-0000
71+
</div>
72+
</div>
73+
74+
{/* Contact Form */}
75+
<form name="contact" method="POST" data-netlify="true" className="text-lg p-4 sm:p-8">
76+
<div className="md:flex">
77+
<div className="flex-1 form-group mb-2 md:mb-4 md:mr-4">
78+
<label htmlFor="name">
79+
<Trans>Name</Trans>
80+
</label>
81+
<div className="icon-wrapper">
82+
<BsFillPersonFill />
83+
</div>
84+
<input type="text" name="name" onFocus={handleFocus}/>
85+
</div>
86+
<div className="flex-1 form-group mb-2 md:mb-4">
87+
<label htmlFor="email">
88+
<Trans>Email</Trans>
89+
</label>
90+
<div className="icon-wrapper">
91+
<AiOutlineMail />
92+
</div>
93+
<input type="text" name="email" onFocus={handleFocus}/>
94+
</div>
95+
</div>
96+
<textarea name="message" rows="3" placeholder="Message" className="mb-2 md:mb-4"/>
97+
<ButtonRed type="submit" text="Send" style={{float: `right`}}/>
98+
{/* <button type="submit">Send</button> */}
99+
</form>
100+
</div>
62101
</SiteBorderStyles>
63102
<Footer />
103+
<div className="bg-img-wrapper">
104+
<Img
105+
style={{ width: `50vw`, minWidth: `300px` }}
106+
fluid={data.fileName.childImageSharp.fluid}
107+
alt="Coderbunker Coders" />
108+
</div>
64109
</ContactStyles>
65110
)
66111
}
112+
113+
const ContactStyles = styled.section`
114+
position: relative;
115+
display: flex;
116+
flex-direction: column;
117+
justify-content: space-between;
118+
p, svg {
119+
color: var(--darkgrey);
120+
}
121+
.bg-img-wrapper {
122+
position: absolute;
123+
left: 0;
124+
bottom: 5vh;
125+
z-index: -1;
126+
}
127+
form {
128+
border-radius: 10px;
129+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
130+
background: rgba(255, 255, 255, 0.5);
131+
}
132+
.form-group {
133+
display: flex;
134+
align-items: center;
135+
position: relative;
136+
border: 1px solid var(--lightgrey);
137+
label {
138+
background: var(--white);
139+
position: absolute;
140+
left: 3rem;
141+
color: var(--darkgrey);
142+
transition: all 0.5s ease;
143+
}
144+
&.focused {
145+
box-shadow: 0 0 10px rgba(255, 0 , 0 , 0.2);
146+
}
147+
label.activated {
148+
transform: translate(-2rem, -1.5rem) scale(0.8);
149+
color: var(--black);
150+
}
151+
.icon-wrapper {
152+
width: 3rem;
153+
height: 3rem;
154+
display: grid;
155+
place-content: center center;
156+
}
157+
input {
158+
width: 100%;
159+
padding: 0.5rem;
160+
&:focus {
161+
outline: none;
162+
}
163+
}
164+
}
165+
textarea {
166+
padding: 1rem;
167+
border: 1px solid var(--lightgrey);
168+
width: 100%;
169+
170+
}
171+
textarea:focus {
172+
outline: none;
173+
box-shadow: 0 0 10px rgba(255, 0 , 0 , 0.2);
174+
}
175+
`;

‎src/components/footer.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import * as React from "react"
22
import styled from 'styled-components';
33
import SiteBorderStyles from '../styles/SiteBorderStyles';
4+
import { FiGithub, FiLinkedin } from "react-icons/fi";
45

56
const FooterStyle = styled.footer`
67
background: var(--black);
7-
color: var(--white);
88
padding: 1rem 0;
9+
color: var(--lightgrey);
910
`;
1011

1112
export default function Footer() {
1213
return (
1314
<FooterStyle>
1415
<SiteBorderStyles>
15-
<p className="text-center">
16-
Copyright © {new Date().getFullYear()} Coderbunker, inc.
17-
</p>
16+
{/* social links*/}
17+
<div className="flex my-2 items-center justify-center">
18+
<a className="inline-block md:hidden p-2" target="_blank" rel="noreferrer" href="https://www.linkedin.com/company/coderbunker/">
19+
<FiLinkedin className="text-xl" style={{ color: `var(--lightgrey)` }}/>
20+
</a>
21+
<a className="inline-block md:hidden p-2 mr-4" target="_blank" rel="noreferrer" href="https://github.com/coderbunker">
22+
<FiGithub className="text-xl" style={{ color: `var(--lightgrey)` }}/>
23+
</a>
24+
<p className="md:text-xl" style={{ color: `var(--lightgrey)` }}>
25+
Copyright © {new Date().getFullYear()} Coderbunker, inc.
26+
</p>
27+
</div>
1828
</SiteBorderStyles>
1929
</FooterStyle>
2030
)

‎src/components/header.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import styled from 'styled-components';
77

88

99
import SiteBorderStyles from '../styles/SiteBorderStyles';
10-
import CallToAction from "./button";
10+
import { CallToAction } from "./button";
1111
import { FiLinkedin, FiGithub } from 'react-icons/fi';
1212
import { SiAircanada } from 'react-icons/si'
1313
export default function Header() {

0 commit comments

Comments
 (0)