Sprint-2 registration-page layout

e-commerce-app/src/App.tsx

@@ -45,4 +45,4 @@ export const App = () => {
             </Routes>
         </Router>
     );
-}
+};

e-commerce-app/src/pages/RegistrationPage/FormPage1.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+
+export const FormPage1 =()=>{
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        const data = new FormData(event.currentTarget);
+        console.log({
+          email: data.get('email'),
+          password: data.get('password'),
+        });
+      };
+    return (
+        <Box
+            component="form"
+                noValidate
+                onSubmit={handleSubmit}
+                sx={{ mt: 2 }}
+              >
+                <Grid container spacing={2}>
+                  <Grid item xs={12}>
+                    <TextField
+                      required
+                      fullWidth
+                      id="email"
+                      label="Email Address"
+                      name="email"
+                      autoComplete="email"
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TextField
+                      required
+                      fullWidth
+                      name="password"
+                      label="Password"
+                      type="password"
+                      id="password"
+                      autoComplete="new-password"
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TextField
+                      required
+                      fullWidth
+                      name="repassword"
+                      label="Repeat Password"
+                      type="password"
+                      id="password"
+                      autoComplete="new-password"
+                    />
+                  </Grid>
+                </Grid>
+              </Box>
+    );
+};

e-commerce-app/src/pages/RegistrationPage/FormPage2.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+
+export const FormPage2 = () => {
+    return (
+        <Box
+                component="form"
+                noValidate
+                sx={{ mt: 2 }}
+              >
+                <Grid container spacing={2}>
+                  <Grid item xs={12}>
+                    <TextField
+                      autoComplete="given-name"
+                      name="firstName"
+                      required
+                      fullWidth
+                      id="firstName"
+                      label="First Name"
+                      autoFocus
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TextField
+                      required
+                      fullWidth
+                      id="lastName"
+                      label="Last Name"
+                      name="lastName"
+                      autoComplete="family-name"
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TextField
+                      fullWidth
+                      name="dateOfBirth"
+                      type="date"
+                      id="dateOfBirth"
+                      label='Date of birth'
+                      autoComplete="birth-day"
+                    />
+                  </Grid>
+                </Grid>
+              </Box>
+    );
+};

e-commerce-app/src/pages/RegistrationPage/FormPage3.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+
+
+export const FormPage3 = () => {
+    return (
+        <Box
+                component="form"
+                noValidate
+                sx={{ mt: 2 }}
+              >
+                <p>Address fields:</p>
+                <Grid container spacing={2}>
+                  <Grid item xs={12}>
+                    <TextField
+                      autoComplete="street"
+                      name="street"
+                      required
+                      fullWidth
+                      id="street"
+                      label="Street"
+                      autoFocus
+                      size='small'
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TextField
+                      required
+                      fullWidth
+                      id="city"
+                      label="City"
+                      name="city"
+                      autoComplete="city"
+                      size='small'
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TextField
+                      required
+                      fullWidth
+                      id="postalCode"
+                      label="Postal Code"
+                      name="postalCode"
+                      autoComplete="postal-code"
+                      size='small'
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TextField
+                      required
+                      fullWidth
+                      name="country"
+                      label="Country"
+                      id="password"
+                      autoComplete="country"
+                      size='small'
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <FormControlLabel
+                      control={
+                        <Checkbox value="allowExtraEmails" color="primary" />
+                      }
+                      label="I want to receive web-site promotions"
+                    />
+                  </Grid>
+                </Grid>
+                <Button
+                  type="submit"
+                  fullWidth
+                  variant="contained"
+                  sx={{ mt: 3, backgroundColor: 'green' }}
+                >
+                  Register
+                </Button>
+              </Box>
+    );
+};

e-commerce-app/src/pages/RegistrationPage/RegistrationPage.tsx

@@ -1,5 +1,70 @@
-import React from 'react';
+import React, { useState} from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Button from '@mui/material/Button';
+import RegPageImg from '../../assets/images/RegPageImg.png';
+import { auto } from '@popperjs/core';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
+import {FormPage1} from './FormPage1';
+import {FormPage2} from './FormPage2';
+import {FormPage3} from './FormPage3';
+
 
 export const RegistrationPage: React.FC = () => {
-    return <div>Registration Page</div>;
+    const [page, setPage] = useState(1);
+    return (
+        <Container component="main" maxWidth="xs">
+            <CssBaseline />
+            <Box
+              sx={{
+                marginTop: 8,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+              }}
+            >
+              <Typography component="h1" variant="h5" sx={{ mb: 3, color: 'green', fontWeight: '900'}}>
+                Welcome to Registration!
+              </Typography>
+              <img src={RegPageImg} alt='Image1' width={200} height={auto}  />
+              <p>Page {page}/3</p>
+              {
+                page == 1 ? <FormPage1/> : page == 2 ? <FormPage2/> : <FormPage3/>
+              }
+            </Box>
+            <Box textAlign='center'>
+            <p>We don&apos;t share your personal information with anyone</p>
+              {
+                page > 1 && (
+                  <Button size='small' variant='contained' sx={{px:4, mt: 2, backgroundColor: 'mediumaquamarine'}} onClick={()=>{
+                    const nextPage = page-1;
+                    setPage(nextPage);
+                  }}>
+                    Back
+                  </Button>
+                )
+              }
+              {
+                page < 3 && (
+                  <Button size='small' variant='contained' sx={{px:4, mt: 2, mx: 4, backgroundColor: 'mediumaquamarine'}} onClick={()=>{
+                    const nextPage = page+1;
+                    setPage(nextPage);
+                  }}>
+                    Next
+                  </Button>
+                )
+              }
+            </Box>
+            <Grid sx={{mt: 2, mb: 5}} container justifyContent="center">
+                  <Grid item>
+                    <Link href="#" variant="body2">
+                      Already have an account? Login
+                    </Link>
+                  </Grid>
+                </Grid>
+        </Container>
+    );
 };