Skip to content

Commit 7da7232

Browse files
a-sarana-saran
committed
changed home page components
1 parent fbec05f commit 7da7232

File tree

2 files changed

+143
-128
lines changed

2 files changed

+143
-128
lines changed

‎src/pages/index.js

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { jsx } from "@emotion/core"
44
import { graphql, navigate } from "gatsby"
55
import Helmet from "react-helmet"
66
import { Box, Text, Flex } from '@chakra-ui/core';
7+
import { H1, H3, P } from '../components/typo';
78

89
import Layout from "../templates/layout"
910
import SEO from "../components/seo"
@@ -50,14 +51,14 @@ const IndexPage = ({ data }) => {
5051
url="https://codebrahma.com"
5152
/>
5253
<Box mt={[3, 6]} textAlign="center">
53-
<Text as='h2' fontSize={[5, 'desktop.5']} fontFamily='heading' lineHeight='3'>
54+
<H1>
5455
We build your React &amp;&nbsp;React Native frontend
55-
</Text>
56+
</H1>
5657
<Box width={['100%', 2/3]} mt={2} mx="auto">
57-
<Text>
58+
<P>
5859
We take your design files &amp; api docs. And give you a fast mobile
5960
and browser app. You focus on your backend business&nbsp;logic!
60-
</Text>
61+
</P>
6162
</Box>
6263
<Flex
6364
mt={1}
@@ -68,19 +69,18 @@ const IndexPage = ({ data }) => {
6869
<ReactIcon width="200" height="200" />
6970
<Title
7071
fontSize={[3, 'desktop.3']}
71-
lineHeight={2}
7272
border='none'
7373
mt={0}
7474
>
7575
React & React Native
7676
</Title>
7777
<Box width={['100%', 2/3]}>
78-
<Text textAlign="center" fontSize={[1, 'desktop.1']} mb='2'>
78+
<P textAlign="center">
7979
We have been building on React / React Native for 3 years now, and
8080
we absolutely love its declarative and functional philosophy. We
8181
strongly believe that a good react codebase is conducive for rapid
8282
UI iteration
83-
</Text>
83+
</P>
8484
</Box>
8585
</Flex>
8686
</Box>
@@ -113,20 +113,18 @@ const IndexPage = ({ data }) => {
113113
</Box>
114114

115115
<Flex mt={[3, 6]} flexDirection="column" alignItems="center">
116-
<Title
117-
fontSize={[3, 'desktop.3']}
116+
<H3
118117
fontWeight="bold"
119118
lineHeight={2}
120-
borderWidth={0}
121119
mt={0}
122120
>
123121
WE ARE ALL EARS
124-
</Title>
122+
</H3>
125123
<Box width={['100%', 2/3]} textAlign="center">
126-
<Text fontSize={[1, 'desktop.1']} mb='2'>
124+
<P>
127125
Whether it's a code review or a project, that you want to discuss or just want to say hello, We would love to hear from you.
128126
We cordially welcome your ideas, suggestions, and reviews regarding our work.
129-
</Text>
127+
</P>
130128
<ContactUsButton text="say hello!" />
131129
</Box>
132130
</Flex>

‎src/templates/layout.js

Lines changed: 132 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -66,124 +66,126 @@ const StyledLink = styled(PlainLink)`
6666
margin-right: 15px;
6767
`
6868

69-
const Footer = ({ images }) => (
70-
<Box marginTop="6" pb="6">
71-
<Box height='2px' bg='black.1'/>
72-
<Flex
73-
flexDirection={["column", "row"]}
74-
justifyContent="space-between"
75-
mt="3"
76-
>
77-
<Box width={['100%', 1 / 3]}>
78-
<Text lineHeight='1'>
79-
Join our <Text as='b' fontFamily='bold' fontWeight='black'>NEW</Text> newsletter to learn about the latest trends in the
80-
fast changing front end atmosphere
81-
</Text>
82-
<Box my="1">
83-
<form
84-
action="https://codebrahma.us3.list-manage.com/subscribe/post"
85-
method="post"
86-
target="/thanks"
87-
>
88-
<input type="hidden" name="u" value="42069ce8928af0d4afc3fd428" />
89-
<input type="hidden" name="id" value="a540ccf305" />
90-
<Box display={['block', 'flex']} mt='3' align='stretch'>
91-
<Input
92-
name="MERGE0"
93-
type="email"
94-
backgroundColor="black.4"
95-
borderWidth={0}
96-
borderRadius={[3, "6px 0 0 6px"]}
97-
placeholder="@ Email address"
98-
height='47px'
99-
p={1}
100-
fontFamily='body'
101-
lineHeight='3'
102-
/>
103-
<Button
104-
bg='primary'
105-
color='tint'
106-
name="subscribe"
107-
px={3}
108-
py="10px"
109-
height='47px'
110-
lineHeight='0'
111-
borderRadius={[3, "0 4px 4px 0"]}
112-
border='none'
113-
fontFamily='body'
114-
mt={[1, 0]}
115-
>
116-
Subscribe
117-
</Button>
118-
</Box>
119-
</form>
69+
const Footer = ({ images }) => {
70+
return (
71+
<Box marginTop="6" pb="6">
72+
<Box height='2px' bg='black.1'/>
73+
<Flex
74+
flexDirection={["column", "row"]}
75+
justifyContent="space-between"
76+
mt="3"
77+
>
78+
<Box width={['100%', 1 / 3]}>
79+
<Text lineHeight='1'>
80+
Join our <Text as='b' fontFamily='bold' fontWeight='black'>NEW</Text> newsletter to learn about the latest trends in the
81+
fast changing front end atmosphere
82+
</Text>
83+
<Box my="1">
84+
<form
85+
action="https://codebrahma.us3.list-manage.com/subscribe/post"
86+
method="post"
87+
target="/thanks"
88+
>
89+
<input type="hidden" name="u" value="42069ce8928af0d4afc3fd428" />
90+
<input type="hidden" name="id" value="a540ccf305" />
91+
<Box display={['block', 'flex']} mt='3' align='stretch'>
92+
<Input
93+
name="MERGE0"
94+
type="email"
95+
backgroundColor="black.4"
96+
borderWidth={0}
97+
borderRadius={[3, "6px 0 0 6px"]}
98+
placeholder="@ Email address"
99+
height='47px'
100+
p={1}
101+
fontFamily='body'
102+
lineHeight='3'
103+
/>
104+
<Button
105+
bg='primary'
106+
color='tint'
107+
name="subscribe"
108+
px={3}
109+
py="10px"
110+
height='47px'
111+
lineHeight='0'
112+
borderRadius={[3, "0 4px 4px 0"]}
113+
border='none'
114+
fontFamily='body'
115+
mt={[1, 0]}
116+
>
117+
Subscribe
118+
</Button>
119+
</Box>
120+
</form>
121+
</Box>
120122
</Box>
121-
</Box>
122-
<Flex flexDirection={["column-reverse", "column"]} width={['100%', 1 / 4]} mt={[2, 0]}>
123-
<TextWithIcon>
124-
<img src={mailIcon} alt="Mail" />
125-
&nbsp;
126-
<PlainLink as="a" href="mailto:hello@codebrahma.com">
127-
hello@codebrahma.com
128-
</PlainLink>
129-
</TextWithIcon>
130-
<TextWithIcon mt={[1, 0]}>
131-
<img src={phoneIcon} alt="Phone" />
132-
&nbsp;
133-
<PlainLink as="a" href="tel:+14845060634">
134-
+1 484 506 0634
135-
</PlainLink>
136-
</TextWithIcon>
137-
<Box mt={[1, 0]}>
138-
<Flex flexDirection={["row"]} alignItems="center">
139-
{socialLinks.map(({ name, link, image }) => {
140-
const imageData = images[image].childImageSharp.fixed
141-
return (
142-
<StyledLink as="a" href={link} target="_blank" key={name}>
143-
<Img
144-
fixed={imageData}
145-
objectFit="contain"
146-
objectPosition="50% 50%"
147-
alt={name}
148-
/>
149-
</StyledLink>
150-
)
151-
})}
152-
</Flex>
123+
<Flex flexDirection={["column-reverse", "column"]} width={['100%', 1 / 4]} mt={[2, 0]}>
124+
<TextWithIcon>
125+
<img src={mailIcon} alt="Mail" />
126+
&nbsp;
127+
<PlainLink as="a" href="mailto:hello@codebrahma.com">
128+
hello@codebrahma.com
129+
</PlainLink>
130+
</TextWithIcon>
131+
<TextWithIcon mt={[1, 0]}>
132+
<img src={phoneIcon} alt="Phone" />
133+
&nbsp;
134+
<PlainLink as="a" href="tel:+14845060634">
135+
+1 484 506 0634
136+
</PlainLink>
137+
</TextWithIcon>
138+
<Box mt={[1, 0]}>
139+
<Flex flexDirection={["row"]} alignItems="center">
140+
{socialLinks.map(({ name, link, image }) => {
141+
const imageData = images[image].childImageSharp.fixed
142+
return (
143+
<StyledLink as="a" href={link} target="_blank" key={name}>
144+
<Img
145+
fixed={imageData}
146+
objectFit="contain"
147+
objectPosition="50% 50%"
148+
alt={name}
149+
/>
150+
</StyledLink>
151+
)
152+
})}
153+
</Flex>
154+
</Box>
155+
</Flex>
156+
<Box width={['100%', 1 / 4]} mb={[2, 0]}>
157+
<TextWithIcon>
158+
<img src={locationIcon} alt="Address" />
159+
&nbsp;
160+
<PlainLink
161+
as="a"
162+
href="http://maps.google.com/?q=Codebrahma 156, 2nd Street San Francisco, CA 94105"
163+
target="_blank"
164+
>
165+
156, 2nd Street
166+
<br />
167+
San Francisco, CA 94105
168+
</PlainLink>
169+
</TextWithIcon>
153170
</Box>
154171
</Flex>
155-
<Box width={['100%', 1 / 4]} mb={[2, 0]}>
156-
<TextWithIcon>
157-
<img src={locationIcon} alt="Address" />
158-
&nbsp;
159-
<PlainLink
160-
as="a"
161-
href="http://maps.google.com/?q=Codebrahma 156, 2nd Street San Francisco, CA 94105"
162-
target="_blank"
163-
>
164-
156, 2nd Street
165-
<br />
166-
San Francisco, CA 94105
167-
</PlainLink>
168-
</TextWithIcon>
169-
</Box>
170-
</Flex>
171172

172-
<Flex mt={[0, 3]} align='center'>
173-
<Box mr={1} display={['none', 'block']}>
174-
<img src={cbLogo} height="48px" alt="Codebrahma Logo" />
175-
</Box>
176-
<Box fontSize='1'>
177-
<Text m='0'>
178-
Codebrahma is an independent company. Mentioned brands and companies are trademarked brands.
179-
</Text>
180-
<Text m='0'>
181-
&copy; 2020 codebrahma.com. All rights reserved.
182-
</Text>
183-
</Box>
184-
</Flex>
185-
</Box>
186-
)
173+
<Flex mt={[0, 3]} align='center'>
174+
<Box mr={1} display={['none', 'block']}>
175+
<img src={cbLogo} height="48px" alt="Codebrahma Logo" />
176+
</Box>
177+
<Box fontSize='1'>
178+
<Text m='0'>
179+
Codebrahma is an independent company. Mentioned brands and companies are trademarked brands.
180+
</Text>
181+
<Text m='0'>
182+
&copy; 2020 codebrahma.com. All rights reserved.
183+
</Text>
184+
</Box>
185+
</Flex>
186+
</Box>
187+
)
188+
}
187189

188190
const Layout = ({ children }) => (
189191
<StaticQuery
@@ -241,7 +243,22 @@ const Layout = ({ children }) => (
241243
<ColorModeProvider>
242244
<Box bg="rgb(247,245,242)" minHeigh="100vh">
243245
<Global
244-
styles={globalStyle}
246+
styles={{
247+
'a:visited': {
248+
color: 'inherit',
249+
},
250+
'a:hover': {
251+
cursor: 'pointer',
252+
},
253+
'body': {
254+
fontFamily: customTheme.fonts.body,
255+
color: customTheme.colors.primary,
256+
// lineHeight: customTheme.lineHeights[1],
257+
},
258+
'*': {
259+
boxSizing: 'border-box',
260+
}
261+
}}
245262
/>
246263
<Box maxWidth='maxContainerWidth' mx={['1', 'auto']} fontSize={[1,'desktop.1']}>
247264
<Helmet

0 commit comments

Comments
 (0)