Skip to content

Commit 48908a9

Browse files
KameshwaranKameshwaran
authored
Merge pull request #66 from Codebrahma/new_master
style updates
2 parents 521bcad + fedfc9d commit 48908a9

18 files changed

+495
-199
lines changed

‎gatsby-config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ module.exports = {
3232
resolve: `@codebrahma/gatsby-theme-blog`,
3333
options: {
3434
contentPath: `posts`,
35-
itemsPerPage: 7,
35+
itemsPerPage: 8,
3636
mdx: false
3737
}
3838
},

‎solutions/react/react.mdx

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,50 +11,51 @@ keywords:
1111
image: ./images/reactjs.png
1212
link: /react-js-development
1313
---
14+
import { Box, P } from 'bricks';
15+
import Title from '../../src/components/title.js';
16+
import ContactUsButton from '../../src/components/contactUsButton.js';
17+
import { RipplingProject } from '../../src/components/projects';
1418
import ContactForm from '../../src/components/contactForm.js';
1519
import Libraries from '../../src/components/libraries.js';
20+
import DevelopmentServices from '../../src/components/developmentServices.js';
1621

17-
# React JS Development Company
22+
<Box my={2}>
23+
<Title>React JS Development Company</Title>
24+
</Box>
1825

1926
We take your _design_ and _api_ specs and give you **a mobile and
20-
web** frontend using react & react native
21-
22-
We primarily based out of San Francisco.
27+
web** frontend using react & react native.<br /> We primarily based out of San Francisco.
2328
We have remote teams in India, Nigeria, Ukraine.
2429

25-
## Contact Us
26-
<ContactForm referrer="/react-js-development/" />
30+
We deliver high quality, well designed fronted code in **less time**.
31+
32+
Lets talk!
33+
<Box>
34+
<ContactUsButton />
35+
</Box>
2736

2837
## Featured ReactJS project
29-
![Rippling](./images/Rippling-Hero-Image.png)
30-
### Rippling: HR Automation Powerhouse developed On ReactJS
31-
[Rippling](/rippling) is a software tool to automate a bunch of things that companies need to do while hiring and offboarding employees. Right from contract management to hardware supplies, to running the payroll and leave management – Rippling does everything.
38+
39+
<RipplingProject />
3240

3341
---
3442
[Here is our ReactJS Development process](/codebrahma-react-application)
3543

3644
We have used the best libraries to develop React JS applications. Some of them are as follows.
3745
<Libraries />
46+
<br />
47+
<br />
3848

39-
We have the right tools to develop and develop production ready React JS applications with minimum possible bundle sizes.
49+
<Box width={[1, 3 / 4]}>
50+
<P>
51+
We have the right tools to develop and develop production ready React JS applications with minimum possible bundle sizes.
52+
</P>
53+
</Box>
4054

4155
> For more info , take a look at our [blogs](/category/react) and [open source contributions](/open-source-contributions).
4256
4357
---
44-
45-
## Reliable ReactJS Development Services
46-
47-
### Fast, modular and Bug free React JS development service
48-
We develop your application with atleast 30% faster than other development companies.
49-
50-
### Javascript Lovers
51-
We specialise in servicing modern JavaScript based web & mobile applications. We are experts in developing applications in React.js, AngularJS, Node.js
52-
53-
### Expert React JS Developers
54-
We have a set of skilful React JS developers who are updated with current React Eco System
55-
56-
### Best React JS development Service history
57-
We have 10 + React projects delivered to clients in quick time
58+
<DevelopmentServices />
5859

5960
## Contact Us
6061
<ContactForm referrer="/react-js-development/" />

‎src/components/contactForm.js

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,50 @@
1-
import React from 'react';
2-
import { Flex, Box, InputText, InputButton } from 'bricks'
1+
import React from "react"
2+
import { Flex, Box, InputText, OutlinedButton } from "bricks"
33

44
const ContactForm = ({ referrer }) => {
55
return (
6-
<form
7-
action="https://formspree.io/anand@codebrahma.com"
8-
method="post">
9-
<input type="hidden" name="_next" value="https://codebrahma.com/thank-you"/>
6+
<form action="https://formspree.io/anand@codebrahma.com" method="post">
7+
<input
8+
type="hidden"
9+
name="_next"
10+
value="https://codebrahma.com/thank-you"
11+
/>
1012
<input type="hidden" name="referrer" value={referrer} />
11-
<Flex flexWrap='wrap' flexDirection='column'>
12-
<Box width={[1,1/2]}>
13-
<InputText size='25' rows="5" style={{width:'100%'}} required as='textarea' name='msg' placeholder='Tell us about your idea'/>
14-
</Box>
15-
<Box width={[1,1/2]} mt={1}>
16-
<InputText style={{width:'100%'}} name='email' type='email' required placeholder='Email address'/>
17-
</Box>
18-
<Box width={[1,1/3]} mt={1}>
19-
<InputButton/>
20-
</Box>
21-
</Flex>
13+
<Flex flexWrap="wrap" flexDirection="column">
14+
<Box width={[1, 1 / 2]}>
15+
<InputText
16+
size="25"
17+
rows="5"
18+
width={1}
19+
required
20+
as="textarea"
21+
name="msg"
22+
backgroundColor="black.4"
23+
borderWidth={0}
24+
borderRadius={3}
25+
placeholder="&#128172; Tell us about your idea"
26+
/>
27+
</Box>
28+
<Box width={[1, 1 / 2]} mt={1}>
29+
<InputText
30+
width={1}
31+
name="email"
32+
type="email"
33+
required
34+
backgroundColor="black.4"
35+
borderWidth={0}
36+
borderRadius={3}
37+
placeholder="@ Email address"
38+
/>
39+
</Box>
40+
<Box width={[1, 1 / 3]} mt={1}>
41+
<OutlinedButton borderRadius={3}>
42+
Submit
43+
</OutlinedButton>
44+
</Box>
45+
</Flex>
2246
</form>
2347
)
2448
}
2549

26-
export default ContactForm;
50+
export default ContactForm

‎src/components/contactUsButton.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react"
2+
import PropTypes from "prop-types"
3+
import { navigate } from "gatsby"
4+
import { InputButton } from "bricks"
5+
6+
const ContactUsButton = ({ text }) => (
7+
<InputButton
8+
borderRadius={3}
9+
value={text}
10+
onClick={() => navigate("/contact")}
11+
/>
12+
);
13+
14+
ContactUsButton.defaultProps = {
15+
text: 'Contact Us'
16+
};
17+
18+
ContactUsButton.propTypes = {
19+
text: PropTypes.string
20+
};
21+
22+
export default ContactUsButton;

‎src/components/developmentServices.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { Box, P } from 'bricks';
3+
4+
import Title from './title';
5+
6+
export default () => (
7+
<Box width={[1, 4 / 5 ]}>
8+
<Title>Reliable ReactJS Development Services</Title>
9+
<br />
10+
<br />
11+
<Title
12+
fontSize={[2, 'desktop.2']}
13+
fontWeight="bold"
14+
borderWidth={0}
15+
mt={2}
16+
>
17+
Fast, modular and Bug free React JS development service
18+
</Title>
19+
<P>
20+
We develop your application with atleast 30% faster than other development companies.
21+
</P>
22+
23+
<Title
24+
fontSize={[2, 'desktop.2']}
25+
fontWeight="bold"
26+
borderWidth={0}
27+
mt={2}
28+
>
29+
Javascript Lovers
30+
</Title>
31+
<P>
32+
We specialise in servicing modern JavaScript based web & mobile applications. We are experts in developing applications in React.js, AngularJS, Node.js
33+
</P>
34+
35+
<Title
36+
fontSize={[2, 'desktop.2']}
37+
fontWeight="bold"
38+
borderWidth={0}
39+
mt={2}
40+
>
41+
Expert React JS Developers
42+
</Title>
43+
<P>
44+
We have a set of skilful React JS developers who are updated with current React Eco System
45+
</P>
46+
47+
<Title
48+
fontSize={[2, 'desktop.2']}
49+
fontWeight="bold"
50+
borderWidth={0}
51+
mt={2}
52+
>
53+
Best React JS development Service history
54+
</Title>
55+
<P>
56+
We have 15+ React projects delivered to clients in quick time
57+
</P>
58+
</Box>
59+
);

‎src/components/libraries.js

Lines changed: 82 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,104 @@
11
import React from "react"
2-
import { Flex, H3, Box } from "bricks"
2+
import styled from "@emotion/styled"
3+
import { Flex, Box } from "bricks"
4+
import Title from "./title"
5+
6+
const OrderedList = styled.ol`
7+
margin: 0;
8+
`;
9+
10+
const ListItem = styled.li`
11+
margin-top: 10px;
12+
margin-bottom: 10px;
13+
`
314

415
export default () => (
516
<Flex flexWrap="wrap">
617
<Box width={[1, 1 / 3]}>
7-
<H3>Code Standard</H3>
8-
<ol>
9-
<li>ES7 and ES6 Ready code</li>
10-
<li>Airbnb-eslint</li>
11-
<li>Flow js</li>
12-
</ol>
18+
<Title
19+
fontSize={[2, 'desktop.2']}
20+
fontWeight="bold"
21+
borderWidth={0}
22+
>
23+
Code Standard
24+
</Title>
25+
<OrderedList>
26+
<ListItem>ES7 and ES6 Ready code</ListItem>
27+
<ListItem>Airbnb-eslint</ListItem>
28+
<ListItem>Flow js</ListItem>
29+
</OrderedList>
1330
</Box>
1431
<Box width={[1, 1 / 3]}>
15-
<H3>State Management</H3>
16-
<ol>
17-
<li>Redux</li>
18-
<li>Mobx</li>
19-
</ol>
32+
<Title
33+
fontSize={[2, 'desktop.2']}
34+
fontWeight="bold"
35+
borderWidth={0}
36+
>
37+
State Management
38+
</Title>
39+
<OrderedList>
40+
<ListItem>Redux</ListItem>
41+
<ListItem>Mobx</ListItem>
42+
</OrderedList>
2043
</Box>
2144

2245
<Box width={[1, 1 / 3]}>
23-
<H3>Bundler</H3>
24-
<ol>
25-
<li>Webpack</li>
26-
<li>Gulp</li>
27-
</ol>
46+
<Title
47+
fontSize={[2, 'desktop.2']}
48+
fontWeight="bold"
49+
borderWidth={0}
50+
>
51+
Bundler
52+
</Title>
53+
<OrderedList>
54+
<ListItem>Webpack</ListItem>
55+
<ListItem>Gulp</ListItem>
56+
</OrderedList>
2857
</Box>
2958

3059
<Box width={[1, 1 / 3]}>
31-
<H3>Async Libraries</H3>
32-
<ol>
33-
<li>redux-saga</li>
34-
<li>redux-observables</li>
35-
<li>redux-thunk</li>
36-
</ol>
60+
<Title
61+
fontSize={[2, 'desktop.2']}
62+
fontWeight="bold"
63+
borderWidth={0}
64+
>
65+
Async Libraries
66+
</Title>
67+
<OrderedList>
68+
<ListItem>redux-saga</ListItem>
69+
<ListItem>redux-observables</ListItem>
70+
<ListItem>redux-thunk</ListItem>
71+
</OrderedList>
3772
</Box>
3873

3974
<Box width={[1, 1 / 3]}>
40-
<H3>Testing Libraries</H3>
41-
<ol>
42-
<li>Enzyme</li>
43-
<li>Mocha</li>
44-
<li>Chai</li>
45-
<li>Jasmine</li>
46-
</ol>
75+
<Title
76+
fontSize={[2, 'desktop.2']}
77+
fontWeight="bold"
78+
borderWidth={0}
79+
>
80+
Testing Libraries
81+
</Title>
82+
<OrderedList>
83+
<ListItem>Enzyme</ListItem>
84+
<ListItem>Mocha</ListItem>
85+
<ListItem>Chai</ListItem>
86+
<ListItem>Jasmine</ListItem>
87+
</OrderedList>
4788
</Box>
4889

4990
<Box width={[1, 1 / 3]}>
50-
<H3>Form Libraries</H3>
51-
<ol>
52-
<li>Redux-forms</li>
53-
<li>Formsy-React</li>
54-
</ol>
91+
<Title
92+
fontSize={[2, 'desktop.2']}
93+
fontWeight="bold"
94+
borderWidth={0}
95+
>
96+
Form Libraries
97+
</Title>
98+
<OrderedList>
99+
<ListItem>Redux-forms</ListItem>
100+
<ListItem>Formsy-React</ListItem>
101+
</OrderedList>
55102
</Box>
56103
</Flex>
57104
)

‎src/components/link.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const link = styled(Link, {
1010
color: inherit;
1111
}
1212
&:hover {
13-
text-decoration: underline;
13+
text-decoration: ${props => (props.withUnderline ? "underline" : "none")};
1414
}
1515
`
1616

0 commit comments

Comments
 (0)