Modified react development page styles

Author: Kameshwaran

solutions/react/react.mdx

@@ -11,8 +11,10 @@ keywords:
 image: ./images/reactjs.png
 link: /react-js-development
 ---
-import { Box } from 'bricks';
+import { Box, P } from 'bricks';
 import Title from '../../src/components/title.js';
+import ContactUsButton from '../../src/components/contactUsButton.js';
+import { RipplingProject } from '../../src/components/projects';
 import ContactForm from '../../src/components/contactForm.js';
 import Libraries from '../../src/components/libraries.js';
 
@@ -26,39 +28,77 @@ We have remote teams in India, Nigeria, Ukraine.
 
 We deliver high quality, well designed fronted code in **less time**.
 
-## Contact Us
-<ContactForm referrer="/react-js-development/" />
+Lets talk!
+<Box>
+  <ContactUsButton />
+</Box>
 
 ## Featured ReactJS project
-![Rippling](./images/Rippling-Hero-Image.png)
-### Rippling: HR Automation Powerhouse developed On ReactJS
-[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.
+
+<RipplingProject />
 
 ---
 [Here is our ReactJS Development process](/codebrahma-react-application)
 
 We have used the best libraries to develop React JS applications. Some of them are as follows.
 <Libraries />
+<br />
+<br />
 
-We have the right tools to develop and develop production ready React JS applications with minimum possible bundle sizes.
+<Box width={[1, 3 / 4]}>
+  <P>
+    We have the right tools to develop and develop production ready React JS applications with minimum possible bundle sizes.
+  </P>
+</Box>
 
 > For more info , take a look at our [blogs](/category/react) and [open source contributions](/open-source-contributions).
 
 ---
 
-## Reliable ReactJS Development Services
-
-### Fast, modular and Bug free React JS development service
-We develop your application with atleast 30% faster than other development companies.
-
-### Javascript Lovers
-We specialise in servicing modern JavaScript based web & mobile applications. We are experts in developing applications in React.js, AngularJS, Node.js
+<Box>
+  <Title>Reliable ReactJS Development Services</Title>
+</Box>
 
-### Expert React JS Developers
-We have a set of skilful React JS developers who are updated with current React Eco System
+  <Title
+    fontSize={[2, 'desktop.2']}
+    fontWeight="bold"
+    borderWidth={0}
+    mt={2}
+  >
+    Fast, modular and Bug free React JS development service
+  </Title>
+  We develop your application with atleast 30% faster than other development companies.
+
+  <Title
+    fontSize={[2, 'desktop.2']}
+    fontWeight="bold"
+    borderWidth={0}
+    mt={2}
+  >
+    Javascript Lovers
+  </Title>
+  We specialise in servicing modern JavaScript based web & mobile applications. We are experts in developing applications in React.js, AngularJS, Node.js
+
+  <Title
+    fontSize={[2, 'desktop.2']}
+    fontWeight="bold"
+    borderWidth={0}
+    mt={2}
+  >
+    Expert React JS Developers
+  </Title>
+  We have a set of skilful React JS developers who are updated with current React Eco System
+
+  <Title
+    fontSize={[2, 'desktop.2']}
+    fontWeight="bold"
+    borderWidth={0}
+    mt={2}
+  >
+    Best React JS development Service history
+  </Title>
+  We have 15+ React projects delivered to clients in quick time
 
-### Best React JS development Service history
-We have 15+ React projects delivered to clients in quick time
 
 ## Contact Us
 <ContactForm referrer="/react-js-development/" />

src/components/projects.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Project from "./project"
+
+export const RipplingProject = () => {
+  const { screenshot } = useStaticQuery(graphql`
+    query {
+      screenshot: file(
+        relativePath: { eq: "screenshots/rippling_screenshot.png" }
+      ) {
+        childImageSharp {
+          fluid(maxWidth: 500, quality: 100) {
+            ...GatsbyImageSharpFluid
+            presentationWidth
+          }
+        }
+      }
+    }
+  `)
+
+  return (
+    <Project
+      title="Rippling"
+      description="HR Automation Powerhouse developed On ReactJS. 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."
+      image={screenshot.childImageSharp.fluid}
+      link="/rippling/"
+    />
+  )
+}