Skip to content

Commit 33a1dd0

Browse files
chethan-b-hpechethan-b-hpe
committed
modified frontend-2
1 parent 369b81b commit 33a1dd0

File tree

1 file changed

+122
-102
lines changed

1 file changed

+122
-102
lines changed

‎src/pages/slack-signup/index.js

Lines changed: 122 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
1-
import React ,{ useState } from 'react';
1+
import React, { useState } from 'react';
22
// import '../../css/style.css';
33
import Swal from 'sweetalert2';
4-
import { Box,Image,Button,TextInput,Text } from 'grommet' ;
4+
import { Box, Image, Button, TextInput, Text } from 'grommet';
55
import PropTypes from 'prop-types';
66
import { graphql } from 'gatsby';
7-
import { Layout,SEO } from '../../components' ;
7+
import { Layout, SEO } from '../../components';
88

99
const { GATSBY_SLACK_TOKEN } = process.env;
1010
const { GATSBY_SLACK_INVITE_URL } = process.env;
11-
const image='/images/hero-pic.png' ;
12-
const buttonstyle={
13-
backgroundColor:'#dcdcdc',borderRadius:'100px',align:'center',
14-
height:'50px',fontSize:'15px',fontFamily:'sans-serif',
15-
11+
const image = '/images/hero-pic.png';
12+
const buttonstyle = {
13+
backgroundColor: '#dcdcdc',
14+
borderRadius: '100px',
15+
align: 'center',
16+
height: '50px',
17+
fontSize: '15px',
18+
fontFamily: 'sans-serif',
1619
};
1720
export default function Slacksignup() {
18-
const [email,setemail]=useState('');
21+
const [email, setemail] = useState('');
1922
const onsubmit = (evt) => {
2023
evt.preventDefault();
2124
if (email) {
@@ -95,120 +98,137 @@ export default function Slacksignup() {
9598
icon: 'info',
9699
});
97100
}
98-
setTimeout(()=>{setemail(''); },2500);
101+
setTimeout(() => {
102+
setemail('');
103+
}, 2500);
104+
};
105+
const handlechange = (event) => {
106+
setemail(event.target.value);
99107
};
100-
const handlechange =(event)=>{
101-
setemail(event.target.value);
102-
} ;
103108
return (
104-
<Layout>
105-
<SEO title='Slack-signup' />
109+
<Layout>
110+
<SEO title="Slack-signup" />
106111
<Box direction="row-responsive" pad="xlarge" gap="xlarge" align="center">
107-
<Box >
108-
<Box style={{ marginTop:'-30px' }} >
109-
<Text
110-
size='xlarge'
111-
style={{ margingTop:'-10px',color:'grey' }}>
112-
Sign up for
113-
</Text>
114-
<h1
115-
style={{ fontFamily:'sans-serif' ,color:'#220', fontWeight: 550
116-
,letterSpacing:'0.5px',
117-
fontSize:'63px',lineHeight:'5rem' }}>
118-
HPE Developer Community <br/> Slack
119-
</h1>
120-
<Image
121-
style={{ height:'80px',width:'100px'
122-
,float:'right',marginTop:'-120px',marginLeft:'170px' }}
123-
src='/img/community/slack.svg'
112+
<Box>
113+
<Box style={{ marginTop: '-30px' }}>
114+
<Text size="xlarge" style={{ margingTop: '-10px', color: 'grey' }}>
115+
Sign up for
116+
</Text>
117+
<h1
118+
style={{
119+
fontFamily: 'sans-serif',
120+
color: '#220',
121+
fontWeight: 550,
122+
letterSpacing: '0.5px',
123+
fontSize: '63px',
124+
lineHeight: '5rem',
125+
}}
126+
>
127+
HPE Developer Community <br /> Slack
128+
</h1>
129+
<Image
130+
style={{
131+
height: '80px',
132+
width: '100px',
133+
float: 'right',
134+
marginTop: '-120px',
135+
marginLeft: '170px',
136+
}}
137+
src="/img/community/slack.svg"
124138
alt="slack logo"
125-
/>
126-
<p style={{ fontWeight:400 ,fontSize:'22px' }}>
127-
Where you’ll find all things software at HPE.
128-
Join us to collaborate and build applications and integrations
129-
with HPE
139+
/>
140+
<p style={{ fontWeight: 400, fontSize: '22px' }}>
141+
Where you’ll find all things software at HPE. Join us to
142+
collaborate and build applications and integrations with HPE
130143
products using the latest software and open source technologies
131-
</p>
144+
</p>
132145
</Box>
133-
<Text size="large">
134-
Email
135-
</Text>
146+
<Text size="large">Email</Text>
136147
<form className="form" id="join-form" onSubmit={onsubmit}>
137-
<Box
138-
align='center'
139-
border={{ side:'bottom' ,size:'small' }}
140-
>
148+
<Box align="center" border={{ side: 'bottom', size: 'small' }}>
141149
<TextInput
142-
type="email"
143-
placeholder="[email protected]"
144-
value={email}
145-
name='email'
146-
onChange={handlechange}
147-
style={{ position: 'relative', marginLeft:'-10px' }}
148-
required
149-
plain/>
150+
type="email"
151+
placeholder="[email protected]"
152+
value={email}
153+
name="email"
154+
onChange={handlechange}
155+
style={{ position: 'relative', marginLeft: '-10px' }}
156+
required
157+
plain
158+
/>
150159
</Box>
151160
<br />
152161
<Button
153-
label="Join us on Slack"
154-
primary
155-
reverse
156-
type='submit'
157-
onSubmit={onsubmit}
158-
icon={<Image
159-
src="/img/home/hpe-element.png" style={{ width:'50px' }} />
160-
}
161-
style={{
162-
backgroundColor: '#01A982',
163-
borderRadius: '100px',
164-
color: '#ffffff',
165-
width: '250px',height:'40px',
166-
}}
167-
/>
162+
label="Join us on Slack"
163+
primary
164+
reverse
165+
type="submit"
166+
onSubmit={onsubmit}
167+
icon={
168+
<Image
169+
src="/img/home/hpe-element.png"
170+
style={{ width: '50px' }}
171+
/>
172+
}
173+
style={{
174+
backgroundColor: '#01A982',
175+
borderRadius: '100px',
176+
color: '#ffffff',
177+
width: '250px',
178+
height: '40px',
179+
}}
180+
/>
168181
</form>
169182
</Box>
170183
<Box align="center">
171184
<Image src={image} alt="hpedev logo" />
172-
</Box>
173-
</Box>
174-
<Box
175-
direction="row-responsive" pad="xlarge" gap="medium" align="center"
176-
style={{ marginTop:'-120px' }}>
177-
<Button label='50+ Channels' style={buttonstyle} />
178-
<Button label='Over 4,000 members' style={buttonstyle} />
179-
<Button label='6 Years+ Community' style={buttonstyle} />
185+
</Box>
186+
</Box>
187+
<Box
188+
direction="row-responsive"
189+
pad="xlarge"
190+
gap="medium"
191+
align="center"
192+
style={{ marginTop: '-120px' }}
193+
>
194+
<Button label="50+ Channels" style={buttonstyle} />
195+
<Button label="Over 4,000 members" style={buttonstyle} />
196+
<Button label="6 Years+ Community" style={buttonstyle} />
180197
</Box>
181-
</Layout>
182-
);
198+
</Layout>
199+
);
183200
}
184201

185202
Slacksignup.propTypes = {
186-
data: PropTypes.shape({
187-
site: PropTypes.shape({
188-
siteMetadata: PropTypes.shape({
189-
title: PropTypes.string.isRequired,
190-
}).isRequired,
203+
data: PropTypes.shape({
204+
site: PropTypes.shape({
205+
siteMetadata: PropTypes.shape({
206+
title: PropTypes.string.isRequired,
191207
}).isRequired,
192-
markdownRemark: PropTypes.shape({
193-
frontmatter: PropTypes.shape({
194-
title: PropTypes.string.isRequired,
195-
image: PropTypes.string,
196-
}).isRequired,
197-
rawMarkdownBody: PropTypes.string,
208+
}).isRequired,
209+
markdownRemark: PropTypes.shape({
210+
frontmatter: PropTypes.shape({
211+
title: PropTypes.string.isRequired,
212+
image: PropTypes.string,
198213
}).isRequired,
199-
}),
214+
rawMarkdownBody: PropTypes.string,
215+
}).isRequired,
216+
}),
200217
};
201-
export const slack=graphql`query {
202-
site {
203-
siteMetadata {
204-
title
218+
export const slack = graphql`
219+
query {
220+
site {
221+
siteMetadata {
222+
title
223+
}
205224
}
206-
}
207-
markdownRemark(fields: { slug: { eq: "/" } }) {
208-
excerpt
209-
frontmatter {
210-
title
211-
image
225+
markdownRemark(fields: { slug: { eq: "/" } }) {
226+
excerpt
227+
frontmatter {
228+
title
229+
image
230+
}
231+
rawMarkdownBody
212232
}
213-
rawMarkdownBody
214-
}}` ;
233+
}
234+
`;

0 commit comments

Comments
 (0)