Skip to content

Commit f18990d

Browse files
author
Carms Ng
committed
[UPD] Linting & organize sections folder & rename
1 parent e43124f commit f18990d

File tree

7 files changed

+122
-127
lines changed

7 files changed

+122
-127
lines changed

‎src/components/logo-garden.js

-89
This file was deleted.

‎src/components/sections/Contact.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import { Trans } from 'gatsby-plugin-react-i18next';
3+
import styled from 'styled-components';
4+
import { StaticImage } from 'gatsby-plugin-image';
5+
import { AiTwotoneMail, AiTwotonePhone } from 'react-icons/ai';
6+
import { FiMapPin } from 'react-icons/fi';
7+
8+
import { SiteBorderStyles } from '../../styles/SiteBorderStyles';
9+
import ContactForm from '../ContactForm';
10+
11+
export default function Contact() {
12+
return (
13+
<ContactStyles>
14+
<SiteBorderStyles className="wrapper">
15+
{/* section-header */}
16+
<div className="text-left md:text-center py-4 md:pt-12">
17+
<h2 className="text-2xl lg:text-4xl">
18+
<span className="highlight-red" style={{ whiteSpace: 'nowrap' }}>
19+
<Trans>Connect</Trans>
20+
</span>
21+
<Trans> With Us</Trans>
22+
</h2>
23+
<p className="hidden md:block text-xl lg:text-2xl my-4">
24+
<Trans>Have a Project? Interested in Joining Force?</Trans>
25+
</p>
26+
</div>
27+
<div style={{ maxWidth: '900px', margin: '0 auto' }}>
28+
{/* Contact Info */}
29+
<div className="flex md:pb-12">
30+
<div className="flex-1 flex md:flex-col items-center md:text-center p-2 md:p-4 text-md md:text-xl">
31+
<FiMapPin className="text-3xl m-2 md:mb-4" />
32+
<Trans>2-227 St-Paul, Quebec, QC, Canada G1K 3W3</Trans>
33+
</div>
34+
<a href="mailto:[email protected]" className="hidden md:flex flex-1 flex-col items-center p-4 text-md md:text-xl">
35+
<AiTwotoneMail className="text-3xl md:mb-4" />
36+
[email protected]
37+
</a>
38+
<div className="hidden md:flex flex-1 flex-col items-center p-4 text-lg md:text-xl">
39+
<AiTwotonePhone className="text-3xl md:mb-4" />
40+
+1 438-530-7111
41+
</div>
42+
</div>
43+
44+
{/* Contact Form */}
45+
<ContactForm />
46+
</div>
47+
</SiteBorderStyles>
48+
<div
49+
className="absolute"
50+
style={{
51+
zIndex: '-1', width: '50vw', left: '0', bottom: '5vh',
52+
}}
53+
>
54+
<StaticImage
55+
placeholder="blurred"
56+
src="../../assets/images/map.png"
57+
width={1000}
58+
alt="Map outline of Canada"
59+
/>
60+
</div>
61+
</ContactStyles>
62+
);
63+
}
64+
65+
const ContactStyles = styled.section`
66+
height: calc(100vh - 56px);
67+
position: relative;
68+
display: flex;
69+
flex-direction: column;
70+
justify-content: space-between;
71+
p, svg {
72+
color: var(--darkgrey);
73+
}
74+
`;

‎src/components/hero.js ‎src/components/sections/Hero.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import * as React from "react"
1+
import * as React from 'react';
22
import { Trans } from 'gatsby-plugin-react-i18next';
33
import styled from 'styled-components';
4-
import { StaticImage } from "gatsby-plugin-image";
4+
import { StaticImage } from 'gatsby-plugin-image';
55

6-
import LogoGarden from '../components/logo-garden';
7-
import SiteBorderStyles from '../styles/SiteBorderStyles';
8-
import StackedAvatar from "./stacked-avatar";
6+
import LogoGarden from '../LogoGarden';
7+
import { SiteBorderStyles } from '../../styles/SiteBorderStyles';
8+
import StackedAvatar from '../StackedAvatar';
99

1010
export default function Hero({ sectionRefs, setTeamIndex, pausedRef }) {
1111
return (
@@ -33,11 +33,11 @@ export default function Hero({ sectionRefs, setTeamIndex, pausedRef }) {
3333

3434
</div>
3535

36-
{/* Hero Image*/}
36+
{/* Hero Image */}
3737
<div className="hidden md:block p-16">
3838
<StaticImage
3939
placeholder="blurred"
40-
src="../assets/images/coders.png"
40+
src="../../assets/images/coders.png"
4141
alt="Coderbunker Coders"
4242
/>
4343
</div>

‎src/components/join.js ‎src/components/sections/Join.js

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import * as React from "react"
1+
import * as React from 'react';
22
import { Trans } from 'gatsby-plugin-react-i18next';
33
import styled from 'styled-components';
4-
import { StaticImage } from "gatsby-plugin-image";
4+
import { StaticImage } from 'gatsby-plugin-image';
55

6-
import SiteBorderStyles from '../styles/SiteBorderStyles';
7-
import BackgroundImage from "./bg-image";
6+
import { SiteBorderStyles } from '../../styles/SiteBorderStyles';
7+
import BackgroundImage from '../BackgroundImage';
88

99
export default function Join() {
1010
return (
@@ -23,21 +23,24 @@ export default function Join() {
2323
</p>
2424
</div>
2525
{/* hashtags */}
26-
<div className="hash-tags" style={{ maxWidth: `800px`, margin: `0 auto` }}>
26+
<div className="hash-tags" style={{ maxWidth: '800px', margin: '0 auto' }}>
2727
<p className="lg:text-xl md:my-4 md:pb-8 text-center">#SoftwareDevelopment #EmbeddedSystems #Blockchain #DigitalIdentity #PublicKeyInfrastructure #SystemAdministration #Cybersecurity #Encryption #Linux #FPGA #ARM #RISC-V #Ethereum #PGP #PostgreSQL #AWS #Azure #GoogleCloud #etc</p>
28-
<div style={{ maxWidth: `70vw`, width: `500px`, margin: `0 auto`, padding: `2rem` }}>
28+
<div style={{
29+
maxWidth: '70vw', width: '500px', margin: '0 auto', padding: '2rem',
30+
}}
31+
>
2932
<StaticImage
3033
placeholder="blurred"
31-
src="../assets/images/coders.png"
34+
src="../../assets/images/coders.png"
3235
alt="Coderbunker Coders Coworking"
3336
/>
3437
</div>
3538
</div>
3639
</SiteBorderStyles>
3740
<div className="bg-img-wrapper flex">
38-
<BackgroundImage style={{ width: `45vw` }} imgStyle={{ height: `auto` }} />
39-
<BackgroundImage style={{ width: `30vw`, transform: `translate(-1vw, 10vw)` }} imgStyle={{ height: `auto` }} />
40-
<BackgroundImage style={{ width: `10vw`, transform: `translate(5vw, 10vw)` }} imgStyle={{ height: `auto` }} />
41+
<BackgroundImage style={{ width: '45vw' }} imgStyle={{ height: 'auto' }} />
42+
<BackgroundImage style={{ width: '30vw', transform: 'translate(-1vw, 10vw)' }} imgStyle={{ height: 'auto' }} />
43+
<BackgroundImage style={{ width: '10vw', transform: 'translate(5vw, 10vw)' }} imgStyle={{ height: 'auto' }} />
4144
</div>
4245
</JoinStyles>
4346
);

‎src/components/service.js ‎src/components/sections/Service.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import * as React from "react"
1+
import * as React from 'react';
22
import { Trans } from 'gatsby-plugin-react-i18next';
33
import styled from 'styled-components';
44
import { FaCube, FaChalkboardTeacher } from 'react-icons/fa';
5-
import SiteBorderStyles from '../styles/SiteBorderStyles';
6-
import BackgroundImage from "./bg-image";
5+
import { SiteBorderStyles } from '../../styles/SiteBorderStyles';
6+
import BackgroundImage from '../BackgroundImage';
77

88
export default function Service() {
99
return (
@@ -35,7 +35,9 @@ export default function Service() {
3535
</div>
3636
<p className="my-3 lg:text-xl">
3737
<span className="inline">
38-
<Trans>Consolidate your HR & IT budget towards direct actions to solve your problems.</Trans>
38+
<Trans>
39+
Consolidate your HR & IT budget towards direct actions to solve your problems.
40+
</Trans>
3941
</span>
4042
</p>
4143
<ul className="hidden md:block lg:my-3 lg:text-xl">
@@ -75,12 +77,12 @@ export default function Service() {
7577
</div>
7678
</SiteBorderStyles>
7779
<div className="bg-img-wrapper flex">
78-
<BackgroundImage style={{width: `40vw`}} imgStyle={{height: `100%`}}/>
79-
<BackgroundImage style={{width: `25vw`, transform: `translate(-1vw, 10vw)`}} imgStyle={{height: `auto`}}/>
80-
<BackgroundImage style={{width: `10vw`, transform: `translate(5vw, 10vw)`}} imgStyle={{height: `auto`}}/>
80+
<BackgroundImage style={{ width: '40vw' }} imgStyle={{ height: '100%' }} />
81+
<BackgroundImage style={{ width: '25vw', transform: 'translate(-1vw, 10vw)' }} imgStyle={{ height: 'auto' }} />
82+
<BackgroundImage style={{ width: '10vw', transform: 'translate(5vw, 10vw)' }} imgStyle={{ height: 'auto' }} />
8183
</div>
8284
</ServiceStyles>
83-
)
85+
);
8486
}
8587

8688
const ServiceStyles = styled.section`

‎src/components/steps.js ‎src/components/sections/Steps.js

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import * as React from "react"
1+
import * as React from 'react';
22
import { Trans } from 'gatsby-plugin-react-i18next';
33
import styled from 'styled-components';
4-
import SiteBorderStyles from '../styles/SiteBorderStyles';
5-
import { FaSignature, FaRocket, FaCubes } from "react-icons/fa";
4+
import { FaSignature, FaRocket, FaCubes } from 'react-icons/fa';
5+
import { SiteBorderStyles } from '../../styles/SiteBorderStyles';
66

77
export default function Steps() {
88
return (
@@ -11,6 +11,7 @@ export default function Steps() {
1111
{/* section-header */}
1212
<div className="text-left md:text-center py-4 md:pt-16 lg:pt-24">
1313
<h2 className="text-2xl lg:text-4xl">
14+
{/* eslint-disable-next-line react/no-unescaped-entities */}
1415
<Trans>Let's Get To </Trans>
1516
<span className="highlight-red">
1617
<Trans>Work</Trans>
@@ -46,7 +47,9 @@ export default function Steps() {
4647
<Trans>Start Building</Trans>
4748
</h3>
4849
<p className="lg:text-xl">
49-
<Trans>Assemble the team based on your problem. Convert dollars to value right away.</Trans>
50+
<Trans>
51+
Assemble the team based on your problem. Convert dollars to value right away.
52+
</Trans>
5053
</p>
5154
</div>
5255
</div>
@@ -60,14 +63,16 @@ export default function Steps() {
6063
<Trans>Iteratively develop</Trans>
6164
</h3>
6265
<p className="lg:text-xl">
63-
<Trans>Continual improvement to develop a tailored, sustainable and scalable solution.</Trans>
66+
<Trans>
67+
Continual improvement to develop a tailored, sustainable and scalable solution.
68+
</Trans>
6469
</p>
6570
</div>
6671
</div>
6772
</div>
6873
</SiteBorderStyles>
6974
</StepsStyles>
70-
)
75+
);
7176
}
7277

7378
const StepsStyles = styled.section`

‎src/components/team.js ‎src/components/sections/Team.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import * as React from "react"
1+
import React from 'react';
22
import { Trans } from 'gatsby-plugin-react-i18next';
33
import styled from 'styled-components';
44

5-
import SiteBorderStyles from '../styles/SiteBorderStyles';
6-
import BackgroundImage from "./bg-image";
7-
import Carousel from "./carousel";
5+
import { SiteBorderStyles } from '../../styles/SiteBorderStyles';
6+
import BackgroundImage from '../BackgroundImage';
7+
import Carousel from '../Carousel';
88

99
export default function Team({ teamIndex, setTeamIndex, locale }) {
1010
return (
@@ -23,13 +23,13 @@ export default function Team({ teamIndex, setTeamIndex, locale }) {
2323
</p>
2424
</div>
2525
{/* Carousel */}
26-
<Carousel teamIndex={teamIndex} setTeamIndex={setTeamIndex} locale={locale}/>
26+
<Carousel teamIndex={teamIndex} setTeamIndex={setTeamIndex} locale={locale} />
2727
</SiteBorderStyles>
2828
<div className="bg-img-wrapper">
29-
<BackgroundImage style={{width: `48vw`}}/>
29+
<BackgroundImage style={{ width: '48vw' }} />
3030
</div>
3131
</TeamStyles>
32-
)
32+
);
3333
}
3434

3535
const TeamStyles = styled.section`

0 commit comments

Comments
 (0)