├── .gitattributes
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.jsx
    ├── responsive.js
    ├── index.js
    ├── components
    │   ├── Announcements.jsx
    │   ├── Products.jsx
    │   ├── Categories.jsx
    │   ├── CategoryItem.jsx
    │   ├── Newsletter.jsx
    │   ├── Product.jsx
    │   ├── Navbar.jsx
    │   ├── Slider.jsx
    │   └── Footer.jsx
    ├── pages
    │   ├── Home.jsx
    │   ├── Login.jsx
    │   ├── Register.jsx
    │   ├── ProductList.jsx
    │   ├── Product.jsx
    │   └── Cart.jsx
    └── data.js
├── .vscode
    └── settings.json
├── .gitignore
├── CONTRIBUTORS.md
├── .github
    └── dependabot.yml
├── CONTRIBUTING.md
├── LICENSE.md
├── package.json
├── README.md
└── CODE_OF_CONDUCT.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ranodeepbanerjee/hacktoberfest-ecommerce/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | 
2 | import Home from "./pages/Home"
3 | 
4 | const App = () => {
5 |   return <Home/>;
6 | };
7 | 
8 | export default App;
9 | 


--------------------------------------------------------------------------------
/src/responsive.js:
--------------------------------------------------------------------------------
1 | import { css } from "styled-components";
2 | 
3 | export const mobile = (props) => {
4 |   return css`
5 |     @media only screen and (max-width: 380px) {
6 |       ${props}
7 |     }
8 |   `;
9 | };


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | );


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.tabSize": 2,
 3 |   "editor.formatOnSave": true,
 4 |   "editor.defaultFormatter": "esbenp.prettier-vscode",
 5 |   "files.insertFinalNewline": true,
 6 |   "files.trimFinalNewlines": true,
 7 |   "css.validate": false,
 8 |   "editor.wordWrap": "wordWrapColumn",
 9 |   "editor.wordWrapColumn": 120
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/CONTRIBUTORS.md:
--------------------------------------------------------------------------------
 1 | # Contributors:
 2 | 
 3 | 1. [Ranodeep Banerjee](https://github.com/ranodeepbanerjee)
 4 | 2. [Subhojeet Das](https://github.com/subhojeetdas1107)
 5 | 3. [Akash Kotal](https://github.com/sky01green)
 6 | 4. [Souvik Banerjee](https://github.com/Souvik2376)
 7 | 5. [Rajdeep Ghosh](https://github.com/rumbleftw)
 8 | 6. [Swagata Das](https://github.com/SwagataDas123)
 9 | 7. [Saikat Sheet](https://github.com/Saikat-SS7)
10 | 8. [Abir Roy](https://github.com/abhuman)
11 | 


--------------------------------------------------------------------------------
/src/components/Announcements.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | const Container = styled.div`
 5 |     height: 30px;
 6 |     background-color: teal;
 7 |     color: white;
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     font-size: 14px;
12 |     font-weight: 500;
13 | `;
14 | const Announcements = () => {
15 |   return (
16 |     <Container>
17 |         Super deal! Free shipping on orders
18 |     </Container>
19 |   )
20 | }
21 | 
22 | export default Announcements


--------------------------------------------------------------------------------
/src/components/Products.jsx:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | import { popularProducts } from "../data";
 3 | import Product from "./Product";
 4 | 
 5 | const Container = styled.div`
 6 |     padding: 20px;
 7 |     display: flex;
 8 |     flex-wrap: wrap;
 9 |     justify-content: space-between;
10 | `;
11 | 
12 | const Products = () => {
13 |   return (
14 |     <Container>
15 |       {popularProducts.map((item) => (
16 |         <Product item={item} key={item.id} />
17 |       ))}
18 |     </Container>
19 |   );
20 | };
21 | 
22 | export default Products;


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "weekly"
12 |       
13 | 


--------------------------------------------------------------------------------
/src/components/Categories.jsx:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | import { categories } from "../data";
 3 | import { mobile } from "../responsive";
 4 | import CategoryItem from "./CategoryItem";
 5 | 
 6 | const Container = styled.div`
 7 |   display: flex;
 8 |   padding: 20px;
 9 |   justify-content: space-between;
10 |   ${mobile({ padding: "0px", flexDirection:"column" })}
11 | `;
12 | 
13 | const Categories = () => {
14 |   return (
15 |     <Container>
16 |       {categories.map((item) => (
17 |         <CategoryItem item={item} key={item.id} />
18 |       ))}
19 |     </Container>
20 |   );
21 | };
22 | 
23 | export default Categories;
24 | 


--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import Announcements from '../components/Announcements'
 4 | import Categories from '../components/Categories'
 5 | import Footer from '../components/Footer'
 6 | import Navbar from '../components/Navbar'
 7 | import Newsletter from '../components/Newsletter'
 8 | import Products from '../components/Products'
 9 | import Slider from '../components/Slider'
10 | 
11 | const Home = () => {
12 |   return (
13 |     <div>
14 |         <Announcements/>
15 |         <Navbar/>
16 |         <Slider/>
17 |         <Categories/>
18 |         <Products/>
19 |         <Newsletter/>
20 |         <Footer/>
21 |     </div>
22 |   )
23 | }
24 | 
25 | export default Home


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |   <meta name="description" content="Web site created using create-react-app" />
 8 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 | <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
11 |   <style>
12 |     * {
13 |       margin: 0;
14 |       font-family: 'Urbanist', sans-serif;
15 |     }
16 |   </style>
17 |   <title>RB SHOP</title>
18 | </head>
19 | 
20 | <body>
21 |   <noscript>You need to enable JavaScript to load this site.</noscript>
22 |   <div id="root"></div>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## How to Contribute
 2 | 
 3 | * Fork this repo.
 4 | * Clone the forked repo.
 5 | * Create a new branch.
 6 | * Make changes to the code.
 7 | * Commit the changes.
 8 | * Push the changes to the forked repo.
 9 | * Create a pull request.
10 | * and done...will be reviewed soon.
11 | 
12 | ## Practice to make a Pull Request
13 | * Fork this repo.
14 | * Clone the forked repo.
15 | * Create a new branch.
16 | * Commit the changes.
17 | * Push the changes to the forked repo.
18 | * Create a pull request.
19 | * and You have practiced how to make a pull request.
20 | * Your PR will be merged soon.
21 | 
22 | <br>
23 | 
24 | #### For more information on how to contribute to open source projects, check out this [link](https://opensource.guide/how-to-contribute/) and [this](https://www.digitalocean.com/community/tutorial_series/an-introduction-to-open-source) and "How to Contribute to Open Source" by [freeCodeCamp](https://www.freecodecamp.org
25 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Badal-05
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "new",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.10.4",
 7 |     "@emotion/styled": "^11.10.4",
 8 |     "@material-ui/core": "^4.12.4",
 9 |     "@material-ui/icons": "^4.11.3",
10 |     "@mui/material": "^5.10.10",
11 |     "@testing-library/jest-dom": "^5.11.4",
12 |     "@testing-library/react": "^11.1.0",
13 |     "@testing-library/user-event": "^12.1.10",
14 |     "react": "^17.0.2",
15 |     "react-dom": "^17.0.2",
16 |     "react-scripts": "^4.0.3",
17 |     "styled-components": "^5.3.5",
18 |     "web-vitals": "^1.0.1"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/CategoryItem.jsx:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | import { mobile } from "../responsive";
 3 | 
 4 | const Container = styled.div`
 5 |   flex: 1;
 6 |   margin: 3px;
 7 |   height: 70vh;
 8 |   position: relative;
 9 | `;
10 | 
11 | const Image = styled.img`
12 |   width: 100%;
13 |   height: 100%;
14 |   object-fit: cover;
15 |   ${mobile({ height: "20vh" })}
16 | `;
17 | 
18 | const Info = styled.div`
19 |   position: absolute;
20 |   top: 0;
21 |   left: 0;
22 |   width: 100%;
23 |   height: 100%;
24 |   display: flex;
25 |   flex-direction: column;
26 |   align-items: center;
27 |   justify-content: center;
28 | `;
29 | 
30 | const Title = styled.h1`
31 |     color:white;
32 |     margin-bottom: 20px;
33 |     background-color:black;
34 |     opacity:0.6;
35 |     padding:5px
36 | `;
37 | 
38 | const Button = styled.button`
39 |     border:none;
40 |     padding: 10px;
41 |     background-color: white;
42 |     color:gray;
43 |     cursor: pointer;
44 |     font-weight: 600;
45 |     :hover {
46 |       background-color: teal;
47 |       padding: 10px;
48 |       color: white;
49 |       border-radius: 10%;
50 |       -webkit-box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.17);
51 |       box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.17);
52 |       
53 |     }
54 |     transition: all 0.4s;
55 | 
56 | `;
57 | 
58 | const CategoryItem = ({ item }) => {
59 |   return (
60 |     <Container>
61 |       <Image src={item.img} />
62 |       <Info>
63 |         <Title>{item.title}</Title>
64 |         <Button>SHOP NOW</Button>
65 |       </Info>
66 |     </Container>
67 |   );
68 | };
69 | 
70 | export default CategoryItem;
71 | 


--------------------------------------------------------------------------------
/src/components/Newsletter.jsx:
--------------------------------------------------------------------------------
 1 | import { Send } from "@material-ui/icons";
 2 | import styled from "styled-components";
 3 | import { mobile } from "../responsive";
 4 | 
 5 | const Container = styled.div`
 6 |   height: 60vh;
 7 |   background-color: #fcf5f5;
 8 |   display: flex;
 9 |   align-items: center;
10 |   justify-content: center;
11 |   flex-direction: column;
12 | `;
13 | const Title = styled.h1`
14 |   font-size: 70px;
15 |   margin-bottom: 20px;
16 | `;
17 | 
18 | const Desc = styled.div`
19 |   font-size: 24px;
20 |   font-weight: 300;
21 |   margin-bottom: 20px;
22 |   ${mobile({ textAlign: "center" })}
23 | `;
24 | 
25 | const InputContainer = styled.div`
26 |   width: 50%;
27 |   height: 40px;
28 |   background-color: white;
29 |   display: flex;
30 |   justify-content: space-between;
31 |   border: 1px solid lightgray;
32 |   box-shadow : -2px 2px grey; 
33 |   ${mobile({ width: "80%" })}
34 | `;
35 | 
36 | const Input = styled.input`
37 |   border: none;
38 |   flex: 8;
39 |   padding-left: 20px;
40 |   outline : none ; 
41 |   font-size : 16px 
42 | 
43 | `;
44 | 
45 | const Button = styled.button`
46 |   flex: 1;
47 |   border: none;
48 |   background-color: teal;
49 |   color: white;
50 |   :hover{
51 |     cursor: pointer ; 
52 |   }
53 | `;
54 | 
55 | const Newsletter = () => {
56 |   return (
57 |     <Container>
58 |       <Title>Newsletter</Title>
59 |       <Desc>Get timely updates from your favorite products.</Desc>
60 |       <InputContainer>
61 |         <Input placeholder="Your email" />
62 |         <Button>
63 |           <Send />
64 |         </Button>
65 |       </InputContainer>
66 |     </Container>
67 |   );
68 | };
69 | 
70 | export default Newsletter;
71 | 


--------------------------------------------------------------------------------
/src/pages/Login.jsx:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | import {mobile} from "../responsive";
 3 | 
 4 | const Container = styled.div`
 5 |   width: 100vw;
 6 |   height: 100vh;
 7 |   background: linear-gradient(
 8 |       rgba(255, 255, 255, 0.5),
 9 |       rgba(255, 255, 255, 0.5)
10 |     ),
11 |     url("https://images.pexels.com/photos/6984650/pexels-photo-6984650.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
12 |       center;
13 |   background-size: cover;
14 |   display: flex;
15 |   align-items: center;
16 |   justify-content: center;
17 | `;
18 | 
19 | const Wrapper = styled.div`
20 |   width: 25%;
21 |   padding: 20px;
22 |   background-color: white;
23 |   ${mobile({ width: "75%" })}
24 | `;
25 | 
26 | const Title = styled.h1`
27 |   font-size: 24px;
28 |   font-weight: 300;
29 | `;
30 | 
31 | const Form = styled.form`
32 |   display: flex;
33 |   flex-direction: column;
34 | `;
35 | 
36 | const Input = styled.input`
37 |   flex: 1;
38 |   min-width: 40%;
39 |   margin: 10px 0;
40 |   padding: 10px;
41 | `;
42 | 
43 | const Button = styled.button`
44 |   width: 40%;
45 |   border: none;
46 |   padding: 15px 20px;
47 |   background-color: teal;
48 |   color: white;
49 |   cursor: pointer;
50 |   margin-bottom: 10px;
51 | `;
52 | 
53 | const Link = styled.a`
54 |   margin: 5px 0px;
55 |   font-size: 12px;
56 |   text-decoration: underline;
57 |   cursor: pointer;
58 | `;
59 | 
60 | const Login = () => {
61 |   return (
62 |     <Container>
63 |       <Wrapper>
64 |         <Title>SIGN IN</Title>
65 |         <Form>
66 |           <Input placeholder="username" />
67 |           <Input placeholder="password" />
68 |           <Button>LOGIN</Button>
69 |           <Link>DO NOT YOU REMEMBER THE PASSWORD?</Link>
70 |           <Link>CREATE A NEW ACCOUNT</Link>
71 |         </Form>
72 |       </Wrapper>
73 |     </Container>
74 |   );
75 | };
76 | 
77 | export default Login;


--------------------------------------------------------------------------------
/src/pages/Register.jsx:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | import { mobile } from "../responsive";
 3 | 
 4 | const Container = styled.div`
 5 |   width: 100vw;
 6 |   height: 100vh;
 7 |   background: linear-gradient(
 8 |       rgba(255, 255, 255, 0.5),
 9 |       rgba(255, 255, 255, 0.5)
10 |     ),
11 |     url("https://images.pexels.com/photos/6984661/pexels-photo-6984661.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
12 |       center;
13 |   background-size: cover;
14 |   display: flex;
15 |   align-items: center;
16 |   justify-content: center;
17 | `;
18 | 
19 | const Wrapper = styled.div`
20 |   width: 40%;
21 |   padding: 20px;
22 |   background-color: white;
23 |   ${mobile({ width: "75%" })}
24 | `;
25 | 
26 | const Title = styled.h1`
27 |   font-size: 24px;
28 |   font-weight: 300;
29 | `;
30 | 
31 | const Form = styled.form`
32 |   display: flex;
33 |   flex-wrap: wrap;
34 | `;
35 | 
36 | const Input = styled.input`
37 |   flex: 1;
38 |   min-width: 40%;
39 |   margin: 20px 10px 0px 0px;
40 |   padding: 10px;
41 | `;
42 | 
43 | const Agreement = styled.span`
44 |   font-size: 12px;
45 |   margin: 20px 0px;
46 | `;
47 | 
48 | const Button = styled.button`
49 |   width: 40%;
50 |   border: none;
51 |   padding: 15px 20px;
52 |   background-color: teal;
53 |   color: white;
54 |   cursor: pointer;
55 | `;
56 | 
57 | const Register = () => {
58 |   return (
59 |     <Container>
60 |       <Wrapper>
61 |         <Title>CREATE AN ACCOUNT</Title>
62 |         <Form>
63 |           <Input placeholder="name" />
64 |           <Input placeholder="last name" />
65 |           <Input placeholder="username" />
66 |           <Input placeholder="email" />
67 |           <Input placeholder="password" />
68 |           <Input placeholder="confirm password" />
69 |           <Agreement>
70 |             By creating an account, I consent to the processing of my personal
71 |             data in accordance with the <b>PRIVACY POLICY</b>
72 |           </Agreement>
73 |           <Button>CREATE</Button>
74 |         </Form>
75 |       </Wrapper>
76 |     </Container>
77 |   );
78 | };
79 | 
80 | export default Register;


--------------------------------------------------------------------------------
/src/components/Product.jsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |     FavoriteBorderOutlined,
 3 |     SearchOutlined,
 4 |     ShoppingCartOutlined,
 5 |   } from "@material-ui/icons";
 6 |   import styled from "styled-components";
 7 |   
 8 |   const Info = styled.div`
 9 |     opacity: 0;
10 |     width: 100%;
11 |     height: 100%;
12 |     position: absolute;
13 |     top: 0;
14 |     left: 0;
15 |     background-color: rgba(0, 0, 0, 0.2);
16 |     z-index: 3;
17 |     display: flex;
18 |     align-items: center;
19 |     justify-content: center;
20 |     transition: all 0.5s ease;
21 |     cursor: pointer;
22 |   `;
23 |   
24 |   const Container = styled.div`
25 |     flex: 1;
26 |     margin: 5px;
27 |     min-width: 280px;
28 |     height: 350px;
29 |     display: flex;
30 |     align-items: center;
31 |     justify-content: center;
32 |     background-color: #f5fbfd;
33 |     position: relative;
34 |     &:hover ${Info}{
35 |       opacity: 1;
36 |     }
37 |   `;
38 |   
39 |   const Circle = styled.div`
40 |     width: 200px;
41 |     height: 200px;
42 |     border-radius: 50%;
43 |     background-color: white;
44 |     position: absolute;
45 |   `;
46 |   
47 |   const Image = styled.img`
48 |     height: 75%;
49 |     z-index: 2;
50 |   `;
51 |   
52 |   const Icon = styled.div`
53 |     width: 40px;
54 |     height: 40px;
55 |     border-radius: 50%;
56 |     background-color: white;
57 |     display: flex;
58 |     align-items: center;
59 |     justify-content: center;
60 |     margin: 10px;
61 |     transition: all 0.5s ease;
62 |     &:hover {
63 |       background-color: #e9f5f5;
64 |       transform: scale(1.1);
65 |     }
66 |   `;
67 |   
68 |   const Product = ({ item }) => {
69 |     return (
70 |       <Container>
71 |         <Circle />
72 |         <Image src={item.img} />
73 |         <Info>
74 |           <Icon>
75 |             <ShoppingCartOutlined />
76 |           </Icon>
77 |           <Icon>
78 |             <SearchOutlined />
79 |           </Icon>
80 |           <Icon>
81 |             <FavoriteBorderOutlined />
82 |           </Icon>
83 |         </Info>
84 |       </Container>
85 |     );
86 |   };
87 |   
88 |   export default Product;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | LINK- https://rbshop.netlify.app/
 2 | 
 3 |  
 4 | 
 5 | #                                                    Hacktoberfest2022
 6 | ![image](https://user-images.githubusercontent.com/99472914/192144059-5cd0b329-f238-474b-b475-7385eaa35d05.png)
 7 | 
 8 |  
 9 | 
10 | [![Open Source Love](https://firstcontributions.github.io/open-source-badges/badges/open-source-v1/open-source.svg)](https://github.com/sj5027052/Hacktoberfest2022)
11 | 
12 |  
13 | 
14 | 
15 | If you want to practice to make a pull request, follow the CONTRIBUTING.md
16 | 
17 |  
18 | 
19 | Check out `good-first-issues` for contributing [here](https://github.com/sj5027052/Hacktoberfest2022/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
20 | </div>
21 | 
22 | <br>
23 | 
24 | 
25 |  
26 | ### Contributing
27 | 
28 | Please read [CONTRIBUTING.md](/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](/CODE_OF_CONDUCT.md) for details on our code of conduct, and the process for submitting pull requests to us.
29 | 
30 | ### Rules
31 | 
32 | * Read the [CONTRIBUTING.md](/CONTRIBUTING.md) file.
33 | * Star the Repository.
34 | * Respect people.
35 | * Be friendly, helpful, and patient.
36 | * You can contribute in any way.
37 | 
38 | ### Support
39 | 
40 | If you like this project, please consider supporting it by giving it a ⭐️. It will help us to grow and improve this project and help others to find it.
41 | 
42 | ### Conclusion
43 | 
44 | - Happy Contributing! 🎉 
45 | - May you have a great Hacktoberfest 2022! 🎉
46 | - If you have any questions, feel free to ask me. I will be happy to help you. 😊
47 | 
48 | ### References
49 | 
50 | - [Hacktoberfest 2022](https://hacktoberfest.digitalocean.com)
51 | - [Hacktoberfest 2022 Participation Guidelines](https://hacktoberfest.com/participation)
52 | 
53 | <br>
54 | 
55 | - This project and other projects listed above are a part of Hacktoberfest 2022 and are open to all members of the GitHub community. Any member may contribute to these projects without being a collaborator or a maintainer and earn a T-shirt from DigitalOcean and DEV by making four valid pull requests (PRs) between October 1-31 (in any time zone).
56 | 
57 | - The first 40,000 participants (maintainers and contributors) who complete Hacktoberfest can elect to receive one of two prizes: a tree planted in their name, or the Hacktoberfest 2022 t-shirt.
58 | 
59 | **✨ Thanks goes to these wonderful people ✨**
60 | 
61 | 
62 | 
63 |  
64 |  
65 | 


--------------------------------------------------------------------------------
/src/pages/ProductList.jsx:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | import Navbar from "../components/Navbar";
 3 | import Products from "../components/Products";
 4 | import Newsletter from "../components/Newsletter";
 5 | import Footer from "../components/Footer";
 6 | import { mobile } from "../responsive";
 7 | import Announcements from "../components/Announcements";
 8 | 
 9 | const Container = styled.div``;
10 | 
11 | const Title = styled.h1`
12 |   margin: 20px;
13 | `;
14 | 
15 | const FilterContainer = styled.div`
16 |   display: flex;
17 |   justify-content: space-between;
18 | `;
19 | 
20 | const Filter = styled.div`
21 |   margin: 20px;
22 |   ${mobile({ width: "0px 20px", display: "flex", flexDirection: "column" })}
23 | `;
24 | 
25 | const FilterText = styled.span`
26 |   font-size: 20px;
27 |   font-weight: 600;
28 |   margin-right: 20px;
29 |   ${mobile({ marginRight: "0px" })}
30 | `;
31 | 
32 | const Select = styled.select`
33 |   padding: 10px;
34 |   margin-right: 20px;
35 |   ${mobile({ margin: "10px 0px" })}
36 | `;
37 | const Option = styled.option``;
38 | 
39 | const ProductList = () => {
40 |   return (
41 |     <Container>
42 |       <Navbar />
43 |       <Announcements />
44 |       <Title>Dresses</Title>
45 |       <FilterContainer>
46 |         <Filter>
47 |           <FilterText>Filter Products:</FilterText>
48 |           <Select>
49 |             <Option disabled selected>
50 |               Color
51 |             </Option>
52 |             <Option>White</Option>
53 |             <Option>Black</Option>
54 |             <Option>Red</Option>
55 |             <Option>Blue</Option>
56 |             <Option>Yellow</Option>
57 |             <Option>Green</Option>
58 |           </Select>
59 |           <Select>
60 |             <Option disabled selected>
61 |               Size
62 |             </Option>
63 |             <Option>XS</Option>
64 |             <Option>S</Option>
65 |             <Option>M</Option>
66 |             <Option>L</Option>
67 |             <Option>XL</Option>
68 |           </Select>
69 |         </Filter>
70 |         <Filter>
71 |           <FilterText>Sort Products:</FilterText>
72 |           <Select>
73 |             <Option selected>Newest</Option>
74 |             <Option>Price (asc)</Option>
75 |             <Option>Price (desc)</Option>
76 |           </Select>
77 |         </Filter>
78 |       </FilterContainer>
79 |       <Products />
80 |       <Newsletter />
81 |       <Footer />
82 |     </Container>
83 |   );
84 | };
85 | 
86 | export default ProductList;


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
  1 | import { Badge } from "@material-ui/core";
  2 | import { Search, ShoppingCartOutlined } from "@material-ui/icons";
  3 | import React from "react";
  4 | import styled from "styled-components";
  5 | import { mobile } from "../responsive";
  6 | 
  7 | const Container = styled.div`
  8 |   height: 60px;
  9 |   position: -webkit-sticky;
 10 |   position: sticky;
 11 |   top: 0;
 12 |   z-index: 999;
 13 |   width: 100%;
 14 |   background-color: white;
 15 |   ${mobile({ height: "50px" })}
 16 | `;
 17 | 
 18 | const Wrapper = styled.div`
 19 |   padding: 10px 40px;
 20 |   display: flex;
 21 |   align-items: center;
 22 |   justify-content: space-between;
 23 |   ${mobile({ padding: "10px 0px" })}
 24 | `;
 25 | 
 26 | const Left = styled.div`
 27 |   flex: 1;
 28 |   display: flex;
 29 |   align-items: center;
 30 | `;
 31 | 
 32 | const Language = styled.span`
 33 |   font-size: 14px;
 34 |   cursor: pointer;
 35 |   ${mobile({ display: "none" })}
 36 | `;
 37 | 
 38 | const SearchContainer = styled.div`
 39 |   border: 0.5px solid lightgray;
 40 |   display: flex;
 41 |   align-items: center;
 42 |   margin-left: 25px;
 43 |   padding: 5px;
 44 |   box-shadow : -2px 2px grey; 
 45 | `;
 46 | 
 47 | const Input = styled.input`
 48 |   border: none;
 49 |   outline: none ; 
 50 |   
 51 |   ${mobile({ width: "50px" })}
 52 | `;
 53 | 
 54 | const Center = styled.div`
 55 |   flex: 1;
 56 |   text-align: center;
 57 | `;
 58 | 
 59 | const Logo = styled.h1`
 60 |   font-weight: bold;
 61 |   ${mobile({ fontSize: "24px" })}
 62 | `;
 63 | const Right = styled.div`
 64 |   flex: 1;
 65 |   display: flex;
 66 |   align-items: center;
 67 |   justify-content: flex-end;
 68 |   ${mobile({ flex: 2, justifyContent: "center" })}
 69 | `;
 70 | 
 71 | const MenuItem = styled.div`
 72 |   font-size: 14px;
 73 |   cursor: pointer;
 74 |   margin: 0 25px;
 75 |   // padding-right: 25px;
 76 |   text-align: center;
 77 |   :hover {
 78 |     background-color: teal;
 79 |     padding: 10px;
 80 |     color: white;
 81 |     border-radius: 10%;
 82 |     -webkit-box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.17);
 83 |     box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.17);
 84 |   }
 85 |   transition: all 0.4s;
 86 | 
 87 |   ${mobile({ fontSize: "12px", marginLeft: "10px" })}
 88 | `;
 89 | 
 90 | const Navbar = () => {
 91 |   return (
 92 |     <Container>
 93 |       <Wrapper>
 94 |         <Left>
 95 |           <Language>EN</Language>
 96 |           <SearchContainer>
 97 |             <Input placeholder="Search" />
 98 |             <Search style={{ color: "gray", fontSize: 16 }} />
 99 |           </SearchContainer>
100 |         </Left>
101 |         <Center>
102 |           <Logo>RB SHOP</Logo>
103 |         </Center>
104 |         <Right>
105 |           <MenuItem>REGISTER</MenuItem>
106 |           <MenuItem>SIGN IN</MenuItem>
107 |           <MenuItem>
108 |             <Badge badgeContent={4} color="primary">
109 |               <ShoppingCartOutlined />
110 |             </Badge>
111 |           </MenuItem>
112 |         </Right>
113 |       </Wrapper>
114 |     </Container>
115 |   );
116 | };
117 | 
118 | export default Navbar;
119 | 


--------------------------------------------------------------------------------
/src/components/Slider.jsx:
--------------------------------------------------------------------------------
  1 | import { ArrowLeftOutlined, ArrowRightOutlined } from "@material-ui/icons";
  2 | import { useState } from "react";
  3 | import styled from "styled-components";
  4 | import { sliderItems } from "../data";
  5 | import { mobile } from "../responsive";
  6 | // import Button from '@mui/material/Button';
  7 | 
  8 | const Container = styled.div`
  9 |   width: 100%;
 10 |   height: 100vh;
 11 |   display: flex;
 12 |   position: relative;
 13 |   overflow: hidden;
 14 |   ${mobile({ display: "none" })}
 15 | `;
 16 | 
 17 | const Arrow = styled.div`
 18 |   width: 50px;
 19 |   height: 50px;
 20 |   background-color: #fff7f7;
 21 |   border-radius: 50%;
 22 |   display: flex;
 23 |   align-items: center;
 24 |   justify-content: center;
 25 |   position: absolute;
 26 |   top: 0;
 27 |   bottom: 0;
 28 |   left: ${(props) => props.direction === "left" && "10px"};
 29 |   right: ${(props) => props.direction === "right" && "10px"};
 30 |   margin: auto;
 31 |   cursor: pointer;
 32 |   opacity: 0.5;
 33 |   z-index: 2;
 34 | `;
 35 | 
 36 | const Wrapper = styled.div`
 37 |   height: 100%;
 38 |   display: flex;
 39 |   transition: all 1.5s ease;
 40 |   transform: translateX(${(props) => props.slideIndex * -100}vw);
 41 | `;
 42 | 
 43 | const Slide = styled.div`
 44 |   width: 100vw;
 45 |   height: 100vh;
 46 |   display: flex;
 47 |   align-items: center;
 48 |   background-color: #${(props) => props.bg};
 49 | `;
 50 | 
 51 | const ImgContainer = styled.div`
 52 |   height: 100%;
 53 |   flex: 1;
 54 | `;
 55 | 
 56 | const Image = styled.img`
 57 |   height: 80%;
 58 | `;
 59 | 
 60 | const InfoContainer = styled.div`
 61 |   flex: 1;
 62 |   padding: 50px;
 63 | `;
 64 | 
 65 | const Title = styled.h1`
 66 |   font-size: 70px;
 67 | `;
 68 | 
 69 | const Desc = styled.p`
 70 |   margin: 50px 0px;
 71 |   font-size: 20px;
 72 |   font-weight: 500;
 73 |   letter-spacing: 3px;
 74 | `;
 75 | 
 76 | const Button = styled.button`
 77 |   padding: 10px;
 78 |   font-size: 20px;
 79 |   background-color: transparent;
 80 |   cursor: pointer;
 81 |   :hover {
 82 |     border: 3px solid #ff7a59;
 83 |   color: #ff7a59;
 84 |   background: #fff;
 85 |  }
 86 | }
 87 | `;
 88 | const Slider = () => {
 89 |   const [slideIndex, setSlideIndex] = useState(0);
 90 |   const handleClick = (direction) => {
 91 |     if (direction === "left") {
 92 |       setSlideIndex(slideIndex > 0 ? slideIndex - 1 : 2);
 93 |     } else {
 94 |       setSlideIndex(slideIndex < 2 ? slideIndex + 1 : 0);
 95 |     }
 96 |   };
 97 | 
 98 |   return (
 99 |     <Container>
100 |       <Arrow direction="left" onClick={() => handleClick("left")}>
101 |         <ArrowLeftOutlined />
102 |       </Arrow>
103 |       <Wrapper slideIndex={slideIndex}>
104 |         {sliderItems.map((item) => (
105 |           <Slide bg={item.bg} key={item.id}>
106 |             <ImgContainer>
107 |               <Image src={item.img} />
108 |             </ImgContainer>
109 |             <InfoContainer>
110 |               <Title>{item.title}</Title>
111 |               <Desc>{item.desc}</Desc>
112 |               <Button>SHOW NOW</Button>
113 |             </InfoContainer>
114 |           </Slide>
115 |         ))}
116 |       </Wrapper>
117 |       <Arrow direction="right" onClick={() => handleClick("right")}>
118 |         <ArrowRightOutlined />
119 |       </Arrow>
120 |     </Container>
121 |   );
122 | };
123 | 
124 | export default Slider;
125 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
 1 | export const sliderItems = [
 2 |     {
 3 |         id: 1,
 4 |         img: "https://thumbs.dreamstime.com/b/fashion-pretty-cool-young-girl-shopping-bags-wearing-black-hat-white-pants-over-colorful-orange-background-79063329.jpg",
 5 |         title: "SUMMER SALE",
 6 |         desc: "DON'T COMPROMISE ON STYLE! GET 30% OFF ON NEW ARRIVALS.",
 7 |         bg: "f5fafd",
 8 |     },
 9 |     {
10 |         id: 2,
11 |         img: "https://www.shutterstock.com/image-photo/high-fashion-photo-beautiful-elegant-600w-2076851164.jpg",
12 |         title: "PARTY WEAR COLLECTION",
13 |         desc: "DON'T COMPROMISE ON STYLE! GET 30% OFF ON NEW ARRIVALS.",
14 |         bg: "fcf1ed",
15 |     },
16 |     {
17 |         id: 3,
18 |         img: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8d2ludGVyJTIwZ2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60",
19 |         title: "WINTER COLLECTION",
20 |         desc: "DON'T COMPROMISE ON STYLE! GET 30% OFF ON NEW ARRIVALS.",
21 |         bg: "fbf0f4",
22 |     },
23 | ];
24 | 
25 | export const categories = [
26 |     {
27 |         id: 1,
28 |         img: "https://img.freepik.com/free-photo/portrait-handsome-smiling-stylish-young-man-model-dressed-red-checkered-shirt-fashion-man-posing_158538-4909.jpg?w=740&t=st=1662831506~exp=1662832106~hmac=3502356175612df11810cd0d56516e59e5dd7442e5aa1e55176532dfd6cb62c8",
29 |         title: "SHIRT STYLE!",
30 |     },
31 |     {
32 |         id: 2,
33 |         img: "https://img.freepik.com/free-photo/wonderful-woman-with-curly-short-hairs-listen-favorite-music-lying-with-closed-eyes-with-pleasure-wearing-cute-pink-loungewear_273443-2791.jpg?w=740&t=st=1662831423~exp=1662832023~hmac=b74a9f166e9b4beee2d56aafd171714b271b0c72fe7f43a129f225fae63c8403",
34 |         title: "LOUNGEWEAR LOVE",
35 |     },
36 |     {
37 |         id: 3,
38 |         img: "https://img.freepik.com/free-photo/young-irl-wearing-black-bra-leather-jacket-while-sitting-balcony-high-quality-photo_144627-75775.jpg?w=360&t=st=1662831575~exp=1662832175~hmac=544a935d713510973aef61747b068b4f01f278687a57446bce3d91f96431bc49",
39 |         title: "LIGHT JACKETS",
40 |     },
41 | ];
42 | 
43 | export const popularProducts = [
44 |     {
45 |       id:1,
46 |       img:"https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
47 |     },
48 |     {
49 |       id:2,
50 |       img:"https://png.pngtree.com/png-clipart/20220815/ourmid/pngtree-mens-solid-red-polo-shirt-for-clothing-model-mockup-and-passport-png-image_6110903.png",
51 |     },
52 |     {
53 |       id:3,
54 |       img:"https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
55 |     },
56 |     {
57 |       id:4,
58 |       img:"https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
59 |     },
60 |     {
61 |       id:5,
62 |       img:"https://images.ctfassets.net/5gvckmvm9289/3BlDoZxSSjqAvv1jBJP7TH/65f9a95484117730ace42abf64e89572/Noissue-x-Creatsy-Tote-Bag-Mockup-Bundle-_4_-2.png",
63 |     },
64 |     {
65 |       id:6,
66 |       img:"https://d3o2e4jr3mxnm3.cloudfront.net/Rocket-Vintage-Chill-Cap_66374_1_lg.png",
67 |     },
68 |     {
69 |       id:7,
70 |       img:"https://png.pngtree.com/png-clipart/20211209/ourmid/pngtree-mens-black-suit-formal-id-photo-png-image_4053965.png",
71 |     },
72 |     {
73 |       id:8,
74 |       img:"https://www.pngarts.com/files/3/Women-Jacket-PNG-High-Quality-Image.png",
75 |     },
76 |   ]


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |     Facebook,
  3 |     Instagram,
  4 |     MailOutline,
  5 |     Phone,
  6 |     Pinterest,
  7 |     Room,
  8 |     Twitter,
  9 |   } from "@material-ui/icons";
 10 |   import styled from "styled-components";
 11 |   import { mobile } from "../responsive";
 12 |   
 13 |   const Container = styled.div`
 14 |     display: flex;
 15 |     ${mobile({ flexDirection: "column" })}
 16 |   `;
 17 |   
 18 |   const Left = styled.div`
 19 |     flex: 1;
 20 |     display: flex;
 21 |     flex-direction: column;
 22 |     padding: 20px;
 23 |   `;
 24 |   
 25 |   const Logo = styled.h1``;
 26 |   
 27 |   const Desc = styled.p`
 28 |     margin: 20px 0px;
 29 |   `;
 30 |   
 31 |   const SocialContainer = styled.div`
 32 |     display: flex;
 33 |   `;
 34 |   
 35 |   const SocialIcon = styled.div`
 36 |     width: 40px;
 37 |     height: 40px;
 38 |     border-radius: 50%;
 39 |     color: white;
 40 |     background-color: #${(props) => props.color};
 41 |     display: flex;
 42 |     align-items: center;
 43 |     justify-content: center;
 44 |     margin-right: 20px;
 45 |     cursor: pointer ; 
 46 |   `;
 47 |   
 48 |   const Center = styled.div`
 49 |     flex: 1;
 50 |     padding: 20px;
 51 |     ${mobile({ display: "none" })}
 52 |   `;
 53 |   
 54 |   const Title = styled.h3`
 55 |     margin-bottom: 30px;
 56 |   `;
 57 |   
 58 |   const List = styled.ul`
 59 |     margin: 0;
 60 |     padding: 0;
 61 |     list-style: none;
 62 |     display: flex;
 63 |     flex-wrap: wrap;
 64 |   `;
 65 |   
 66 |   const ListItem = styled.li`
 67 |     width: 50%;
 68 |     margin-bottom: 10px;
 69 |     cursor : pointer ; 
 70 |     :hover{
 71 |       text-decoration : underline ; 
 72 |       color : green ; 
 73 |     }
 74 |   `;
 75 |   
 76 |   const Right = styled.div`
 77 |     flex: 1;
 78 |     padding: 20px;
 79 |     ${mobile({ backgroundColor: "#fff8f8" })}
 80 |   `;
 81 |   
 82 |   const ContactItem = styled.div`
 83 |     margin-bottom: 20px;
 84 |     display: flex;
 85 |     align-items: center;
 86 |     cursor: pointer ; 
 87 |     :hover{
 88 |       text-decoration : underline ; 
 89 |       color : green ; 
 90 |     }
 91 | 
 92 |   `;
 93 |   
 94 |   const Payment = styled.img`
 95 |       width: 50%;
 96 |       cursor : pointer ; 
 97 |   `;
 98 |   
 99 |   const Footer = () => {
100 |     return (
101 |       <Container>
102 |         <Left>
103 |           <Logo>RB SHOP</Logo>
104 |           <Desc>
105 |             There are many variations of passages of Lorem Ipsum available, but
106 |             the majority have suffered alteration in some form, by injected
107 |             humour, or randomised words which don’t look even slightly believable.
108 |           </Desc>
109 |           <SocialContainer>
110 |             <SocialIcon color="3B5999">
111 |               <Facebook />
112 |             </SocialIcon>
113 |             <SocialIcon color="E4405F">
114 |               <Instagram />
115 |             </SocialIcon>
116 |             <SocialIcon color="55ACEE">
117 |               <Twitter />
118 |             </SocialIcon>
119 |             <SocialIcon color="E60023">
120 |               <Pinterest />
121 |             </SocialIcon>
122 |           </SocialContainer>
123 |         </Left>
124 |         <Center>
125 |           <Title>Useful Links</Title>
126 |           <List>
127 |             <ListItem>Home</ListItem>
128 |             <ListItem>Cart</ListItem>
129 |             <ListItem>Man Fashion</ListItem>
130 |             <ListItem>Woman Fashion</ListItem>
131 |             <ListItem>Accessories</ListItem>
132 |             <ListItem>My Account</ListItem>
133 |             <ListItem>Order Tracking</ListItem>
134 |             <ListItem>Wishlist</ListItem>
135 |             <ListItem>Wishlist</ListItem>
136 |             <ListItem>Terms</ListItem>
137 |           </List>
138 |         </Center>
139 |         <Right>
140 |           <Title>Contact</Title>
141 |           <ContactItem>
142 |             <Room style={{marginRight:"10px"}}/> Abantika Housing Estate, Kolkata, India
143 |           </ContactItem>
144 |           <ContactItem>
145 |             <Phone style={{marginRight:"10px"}}/> +91-9330740641
146 |           </ContactItem>
147 |           <ContactItem>
148 |             <MailOutline style={{marginRight:"10px"}} /> contact@RB
149 |           </ContactItem>
150 |           <Payment src="https://i.ibb.co/Qfvn4z6/payment.png" />
151 |         </Right>
152 |       </Container>
153 |     );
154 |   };
155 |   
156 |   export default Footer;
157 | 


--------------------------------------------------------------------------------
/src/pages/Product.jsx:
--------------------------------------------------------------------------------
  1 | import { Add, Remove } from "@material-ui/icons";
  2 | import styled from "styled-components";
  3 | import Announcements from "../components/Announcements";
  4 | import Footer from "../components/Footer";
  5 | import Navbar from "../components/Navbar";
  6 | import Newsletter from "../components/Newsletter";
  7 | import { mobile } from "../responsive";
  8 | 
  9 | const Container = styled.div``;
 10 | 
 11 | const Wrapper = styled.div`
 12 |   padding: 50px;
 13 |   display: flex;
 14 |   ${mobile({ padding: "10px", flexDirection:"column" })}
 15 | `;
 16 | 
 17 | const ImgContainer = styled.div`
 18 |   flex: 1;
 19 | `;
 20 | 
 21 | const Image = styled.img`
 22 |   width: 100%;
 23 |   height: 90vh;
 24 |   object-fit: cover;
 25 |   ${mobile({ height: "40vh" })}
 26 | `;
 27 | 
 28 | const InfoContainer = styled.div`
 29 |   flex: 1;
 30 |   padding: 0px 50px;
 31 |   ${mobile({ padding: "10px" })}
 32 | `;
 33 | 
 34 | const Title = styled.h1`
 35 |   font-weight: 200;
 36 | `;
 37 | 
 38 | const Desc = styled.p`
 39 |   margin: 20px 0px;
 40 | `;
 41 | 
 42 | const Price = styled.span`
 43 |   font-weight: 100;
 44 |   font-size: 40px;
 45 | `;
 46 | 
 47 | const FilterContainer = styled.div`
 48 |   width: 50%;
 49 |   margin: 30px 0px;
 50 |   display: flex;
 51 |   justify-content: space-between;
 52 |   ${mobile({ width: "100%" })}
 53 | `;
 54 | 
 55 | const Filter = styled.div`
 56 |   display: flex;
 57 |   align-items: center;
 58 | `;
 59 | 
 60 | const FilterTitle = styled.span`
 61 |   font-size: 20px;
 62 |   font-weight: 200;
 63 | `;
 64 | 
 65 | const FilterColor = styled.div`
 66 |   width: 20px;
 67 |   height: 20px;
 68 |   border-radius: 50%;
 69 |   background-color: ${(props) => props.color};
 70 |   margin: 0px 5px;
 71 |   cursor: pointer;
 72 | `;
 73 | 
 74 | const FilterSize = styled.select`
 75 |   margin-left: 10px;
 76 |   padding: 5px;
 77 | `;
 78 | 
 79 | const FilterSizeOption = styled.option``;
 80 | 
 81 | const AddContainer = styled.div`
 82 |   width: 50%;
 83 |   display: flex;
 84 |   align-items: center;
 85 |   justify-content: space-between;
 86 |   ${mobile({ width: "100%" })}
 87 | `;
 88 | 
 89 | const AmountContainer = styled.div`
 90 |   display: flex;
 91 |   align-items: center;
 92 |   font-weight: 700;
 93 | `;
 94 | 
 95 | const Amount = styled.span`
 96 |   width: 30px;
 97 |   height: 30px;
 98 |   border-radius: 10px;
 99 |   border: 1px solid teal;
100 |   display: flex;
101 |   align-items: center;
102 |   justify-content: center;
103 |   margin: 0px 5px;
104 | `;
105 | 
106 | const Button = styled.button`
107 |   padding: 15px;
108 |   border: 2px solid teal;
109 |   background-color: white;
110 |   cursor: pointer;
111 |   font-weight: 500;
112 |   &:hover{
113 |       background-color: #f8f4f4;
114 |   }
115 | `;
116 | 
117 | const Product = () => {
118 |   return (
119 |     <Container>
120 |       <Navbar />
121 |       <Announcements />
122 |       <Wrapper>
123 |         <ImgContainer>
124 |           <Image src="https://i.ibb.co/S6qMxwr/jean.jpg" />
125 |         </ImgContainer>
126 |         <InfoContainer>
127 |           <Title>Denim Jumpsuit</Title>
128 |           <Desc>
129 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
130 |             venenatis, dolor in finibus malesuada, lectus ipsum porta nunc, at
131 |             iaculis arcu nisi sed mauris. Nulla fermentum vestibulum ex, eget
132 |             tristique tortor pretium ut. Curabitur elit justo, consequat id
133 |             condimentum ac, volutpat ornare.
134 |           </Desc>
135 |           <Price>$ 20</Price>
136 |           <FilterContainer>
137 |             <Filter>
138 |               <FilterTitle>Color</FilterTitle>
139 |               <FilterColor color="black" />
140 |               <FilterColor color="darkblue" />
141 |               <FilterColor color="gray" />
142 |             </Filter>
143 |             <Filter>
144 |               <FilterTitle>Size</FilterTitle>
145 |               <FilterSize>
146 |                 <FilterSizeOption>XS</FilterSizeOption>
147 |                 <FilterSizeOption>S</FilterSizeOption>
148 |                 <FilterSizeOption>M</FilterSizeOption>
149 |                 <FilterSizeOption>L</FilterSizeOption>
150 |                 <FilterSizeOption>XL</FilterSizeOption>
151 |               </FilterSize>
152 |             </Filter>
153 |           </FilterContainer>
154 |           <AddContainer>
155 |             <AmountContainer>
156 |               <Remove />
157 |               <Amount>1</Amount>
158 |               <Add />
159 |             </AmountContainer>
160 |             <Button>ADD TO CART</Button>
161 |           </AddContainer>
162 |         </InfoContainer>
163 |       </Wrapper>
164 |       <Newsletter />
165 |       <Footer />
166 |     </Container>
167 |   );
168 | };
169 | 
170 | export default Product;


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | .
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/src/pages/Cart.jsx:
--------------------------------------------------------------------------------
  1 | import { Add, Remove } from "@material-ui/icons";
  2 | import styled from "styled-components";
  3 | import Announcements from "../components/Announcements";
  4 | import Footer from "../components/Footer";
  5 | import Navbar from "../components/Navbar";
  6 | import { mobile } from "../responsive";
  7 | 
  8 | const Container = styled.div``;
  9 | 
 10 | const Wrapper = styled.div`
 11 |   padding: 20px;
 12 |   ${mobile({ padding: "10px" })}
 13 | `;
 14 | 
 15 | const Title = styled.h1`
 16 |   font-weight: 300;
 17 |   text-align: center;
 18 | `;
 19 | 
 20 | const Top = styled.div`
 21 |   display: flex;
 22 |   align-items: center;
 23 |   justify-content: space-between;
 24 |   padding: 20px;
 25 | `;
 26 | 
 27 | const TopButton = styled.button`
 28 |   padding: 10px;
 29 |   font-weight: 600;
 30 |   cursor: pointer;
 31 |   border: ${(props) => props.type === "filled" && "none"};
 32 |   background-color: ${(props) =>
 33 |     props.type === "filled" ? "black" : "transparent"};
 34 |   color: ${(props) => props.type === "filled" && "white"};
 35 | `;
 36 | 
 37 | const TopTexts = styled.div`
 38 |   ${mobile({ display: "none" })}
 39 | `;
 40 | const TopText = styled.span`
 41 |   text-decoration: underline;
 42 |   cursor: pointer;
 43 |   margin: 0px 10px;
 44 | `;
 45 | 
 46 | const Bottom = styled.div`
 47 |   display: flex;
 48 |   justify-content: space-between;
 49 |   ${mobile({ flexDirection: "column" })}
 50 | `;
 51 | 
 52 | const Info = styled.div`
 53 |   flex: 3;
 54 | `;
 55 | 
 56 | const Product = styled.div`
 57 |   display: flex;
 58 |   justify-content: space-between;
 59 |   ${mobile({ flexDirection: "column" })}
 60 | `;
 61 | 
 62 | const ProductDetail = styled.div`
 63 |   flex: 2;
 64 |   display: flex;
 65 | `;
 66 | 
 67 | const Image = styled.img`
 68 |   width: 200px;
 69 | `;
 70 | 
 71 | const Details = styled.div`
 72 |   padding: 20px;
 73 |   display: flex;
 74 |   flex-direction: column;
 75 |   justify-content: space-around;
 76 | `;
 77 | 
 78 | const ProductName = styled.span``;
 79 | 
 80 | const ProductId = styled.span``;
 81 | 
 82 | const ProductColor = styled.div`
 83 |   width: 20px;
 84 |   height: 20px;
 85 |   border-radius: 50%;
 86 |   background-color: ${(props) => props.color};
 87 | `;
 88 | 
 89 | const ProductSize = styled.span``;
 90 | 
 91 | const PriceDetail = styled.div`
 92 |   flex: 1;
 93 |   display: flex;
 94 |   flex-direction: column;
 95 |   align-items: center;
 96 |   justify-content: center;
 97 | `;
 98 | 
 99 | const ProductAmountContainer = styled.div`
100 |   display: flex;
101 |   align-items: center;
102 |   margin-bottom: 20px;
103 | `;
104 | 
105 | const ProductAmount = styled.div`
106 |   font-size: 24px;
107 |   margin: 5px;
108 |   ${mobile({ margin: "5px 15px" })}
109 | `;
110 | 
111 | const ProductPrice = styled.div`
112 |   font-size: 30px;
113 |   font-weight: 200;
114 |   ${mobile({ marginBottom: "20px" })}
115 | `;
116 | 
117 | const Hr = styled.hr`
118 |   background-color: #eee;
119 |   border: none;
120 |   height: 1px;
121 | `;
122 | 
123 | const Summary = styled.div`
124 |   flex: 1;
125 |   border: 0.5px solid lightgray;
126 |   border-radius: 10px;
127 |   padding: 20px;
128 |   height: 50vh;
129 | `;
130 | 
131 | const SummaryTitle = styled.h1`
132 |   font-weight: 200;
133 | `;
134 | 
135 | const SummaryItem = styled.div`
136 |   margin: 30px 0px;
137 |   display: flex;
138 |   justify-content: space-between;
139 |   font-weight: ${(props) => props.type === "total" && "500"};
140 |   font-size: ${(props) => props.type === "total" && "24px"};
141 | `;
142 | 
143 | const SummaryItemText = styled.span``;
144 | 
145 | const SummaryItemPrice = styled.span``;
146 | 
147 | const Button = styled.button`
148 |   width: 100%;
149 |   padding: 10px;
150 |   background-color: black;
151 |   color: white;
152 |   font-weight: 600;
153 | `;
154 | 
155 | const Cart = () => {
156 |   return (
157 |     <Container>
158 |       <Navbar />
159 |       <Announcements />
160 |       <Wrapper>
161 |         <Title>YOUR BAG</Title>
162 |         <Top>
163 |           <TopButton>CONTINUE SHOPPING</TopButton>
164 |           <TopTexts>
165 |             <TopText>Shopping Bag(2)</TopText>
166 |             <TopText>Your Wishlist (0)</TopText>
167 |           </TopTexts>
168 |           <TopButton type="filled">CHECKOUT NOW</TopButton>
169 |         </Top>
170 |         <Bottom>
171 |           <Info>
172 |             <Product>
173 |               <ProductDetail>
174 |                 <Image src="https://hips.hearstapps.com/vader-prod.s3.amazonaws.com/1614188818-TD1MTHU_SHOE_ANGLE_GLOBAL_MENS_TREE_DASHERS_THUNDER_b01b1013-cd8d-48e7-bed9-52db26515dc4.png?crop=1xw:1.00xh;center,top&resize=480%3A%2A" />
175 |                 <Details>
176 |                   <ProductName>
177 |                     <b>Product:</b> JESSIE THUNDER SHOES
178 |                   </ProductName>
179 |                   <ProductId>
180 |                     <b>ID:</b> 93813718293
181 |                   </ProductId>
182 |                   <ProductColor color="black" />
183 |                   <ProductSize>
184 |                     <b>Size:</b> 37.5
185 |                   </ProductSize>
186 |                 </Details>
187 |               </ProductDetail>
188 |               <PriceDetail>
189 |                 <ProductAmountContainer>
190 |                   <Add />
191 |                   <ProductAmount>2</ProductAmount>
192 |                   <Remove />
193 |                 </ProductAmountContainer>
194 |                 <ProductPrice>$ 30</ProductPrice>
195 |               </PriceDetail>
196 |             </Product>
197 |             <Hr />
198 |             <Product>
199 |               <ProductDetail>
200 |                 <Image src="https://i.pinimg.com/originals/2d/af/f8/2daff8e0823e51dd752704a47d5b795c.png" />
201 |                 <Details>
202 |                   <ProductName>
203 |                     <b>Product:</b> HAKURA T-SHIRT
204 |                   </ProductName>
205 |                   <ProductId>
206 |                     <b>ID:</b> 93813718293
207 |                   </ProductId>
208 |                   <ProductColor color="gray" />
209 |                   <ProductSize>
210 |                     <b>Size:</b> M
211 |                   </ProductSize>
212 |                 </Details>
213 |               </ProductDetail>
214 |               <PriceDetail>
215 |                 <ProductAmountContainer>
216 |                   <Add />
217 |                   <ProductAmount>1</ProductAmount>
218 |                   <Remove />
219 |                 </ProductAmountContainer>
220 |                 <ProductPrice>$ 20</ProductPrice>
221 |               </PriceDetail>
222 |             </Product>
223 |           </Info>
224 |           <Summary>
225 |             <SummaryTitle>ORDER SUMMARY</SummaryTitle>
226 |             <SummaryItem>
227 |               <SummaryItemText>Subtotal</SummaryItemText>
228 |               <SummaryItemPrice>$ 80</SummaryItemPrice>
229 |             </SummaryItem>
230 |             <SummaryItem>
231 |               <SummaryItemText>Estimated Shipping</SummaryItemText>
232 |               <SummaryItemPrice>$ 5.90</SummaryItemPrice>
233 |             </SummaryItem>
234 |             <SummaryItem>
235 |               <SummaryItemText>Shipping Discount</SummaryItemText>
236 |               <SummaryItemPrice>$ -5.90</SummaryItemPrice>
237 |             </SummaryItem>
238 |             <SummaryItem type="total">
239 |               <SummaryItemText>Total</SummaryItemText>
240 |               <SummaryItemPrice>$ 80</SummaryItemPrice>
241 |             </SummaryItem>
242 |             <Button>CHECKOUT NOW</Button>
243 |           </Summary>
244 |         </Bottom>
245 |       </Wrapper>
246 |       <Footer />
247 |     </Container>
248 |   );
249 | };
250 | 
251 | export default Cart;


--------------------------------------------------------------------------------