58 |
59 |
60 |
61 |
64 |
65 |
68 |
69 |
72 |
73 |
76 |
77 |
80 |
81 |
84 |
85 |
88 |
89 |
90 |
91 |
94 |
95 |
98 |
99 |
102 |
103 |
106 |
107 |
110 |
111 |
114 |
115 |
118 |
119 |
120 | {/*
123 |
124 |
125 |
128 |
129 |
130 |
133 |
134 |
135 |
136 |
19 | {title} Shoes
20 |
41 |
42 |
21 |
22 | Gym
23 |
24 |
25 | Tennis
26 |
27 |
28 | Jordan
29 |
30 |
31 | Running
32 |
33 |
34 | Football
35 |
36 |
37 | Basketball
38 |
39 |
40 |
43 | {title} Shoes
44 |
65 |
66 | {/*
45 |
46 | Gym
47 |
48 |
49 | Tennis
50 |
51 |
52 | Jordan
53 |
54 |
55 | Running
56 |
57 |
58 | Football
59 |
60 |
61 | Basketball
62 |
63 |
64 |
67 |
69 |
70 | {title} Shoes
71 |
*/}
95 |
96 | );
97 | }
98 |
99 | export default AllShoes_Navbar;
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/Men.css:
--------------------------------------------------------------------------------
1 | /* .men {
2 | max-width: 100vw;
3 | background: linear-gradient(to right, rgb(187, 0, 0), rgb(252, 27, 27));
4 | }
5 |
6 | .men__shoes {
7 | margin-left: 20vw;
8 | margin-right: 30px;
9 | margin-top: 30px;
10 | border: 1px solid black;
11 | height: 100vh;
12 | } */
13 |
14 | .men {
15 | max-width: 100vw;
16 | height: 100%;
17 | background: linear-gradient(to right, rgb(226, 151, 151), rgb(214, 211, 211));
18 | }
19 |
20 | .men__categories {
21 | margin: 50px;
22 | display: flex;
23 | flex-wrap: wrap;
24 | justify-content: space-between;
25 | }
26 |
27 | @media screen and (max-width: 500px) {
28 | .men__categories {
29 | margin: 0;
30 | margin-top: 18px;
31 | /* margin: 0 15px; */
32 | flex-direction: column;
33 | align-items: center;
34 | }
35 | }
36 |
37 | @media screen and (min-width: 500px) and (max-width: 785px) {
38 | .men__categories {
39 | margin: 0;
40 | margin-top: 20px;
41 | /* margin: 0 15px; */
42 | flex-direction: column;
43 | align-items: center;
44 | }
45 | }
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/Men.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './Men.css';
4 | // import AllShoes_Navbar from '../AllShoes_Navbar/AllShoes_Navbar';
5 | import MenWomenFootwear from '../MenWomenFootwear/MenWomenFootwear';
6 | import MGym from './mGym.jpg';
7 | import MTennis from './mTennis.jpeg';
8 | import MJordan from './mJordan.jpg';
9 | import MRunning from './mRunning.jpg';
10 | import MFootball from './mFootball.jpg';
11 | import MBasketball from './mBasketball.jpg';
12 |
13 | const Men = () => {
14 | return (
15 |
72 |
73 | Gym
74 |
75 |
76 | Tennis
77 |
78 |
79 | Jordan
80 |
81 |
82 | Running
83 |
84 |
85 | Football
86 |
87 |
88 | Basketball
89 |
90 |
91 |
92 |
94 |
16 | {/*
63 | );
64 | }
65 |
66 | export default Men;
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/Lebron17monstars.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenBasketball/Lebron17monstars.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/MenBasketball.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './MenBasketball.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import Kyrie3 from './kyrie3.jpg';
9 | import Lebron17 from './lebron17.jpg';
10 | import Pg4 from './pg4.jpg';
11 | import Lebron17FP from './lebron17FP.jpg';
12 | import KybridS2 from './kybridS2.jpg';
13 | import Freak2 from './freak2.jpg';
14 | import Lebron17Monstars from './Lebron17monstars.jpg';
15 | import Kyrie6 from './kyrie6.jpg';
16 |
17 | const MenBasketball = () => {
18 | return (
19 |
26 | hi
27 |
*/}
28 | .
29 |
30 |
61 | .
62 |
20 |
97 | );
98 | }
99 |
100 | export default MenBasketball;
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/freak2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenBasketball/freak2.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/kybridS2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenBasketball/kybridS2.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/kyrie3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenBasketball/kyrie3.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/kyrie6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenBasketball/kyrie6.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/lebron17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenBasketball/lebron17.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/lebron17FP.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenBasketball/lebron17FP.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenBasketball/pg4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenBasketball/pg4.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/MenFootball.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './MenFootball.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import PhantomGT from './phantomGT.jpg';
9 | import PhantomGTclub from './phantomGTclub.jpg';
10 | import Superfly7 from './superfly7.jpg';
11 | import Tiempo8 from './tiempo8.jpg';
12 | import Superfly7pro from './superfly7pro.jpg';
13 | import Vapor13 from './vapor13.jpg';
14 | import Vapor13mds from './vapor13mds.jpg';
15 | import Vision2 from './vision2.jpg';
16 | import Vapor13neymar from './vapor13neymar.jpg';
17 | import Legend8 from './legend8.jpg';
18 |
19 | const MenFootball = () => {
20 | return (
21 |
31 |
96 |
22 |
114 | );
115 | }
116 |
117 | export default MenFootball;
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/legend8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/legend8.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/phantomGT.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/phantomGT.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/phantomGTclub.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/phantomGTclub.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/superfly7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/superfly7.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/superfly7pro.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/superfly7pro.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/tiempo8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/tiempo8.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/vapor13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/vapor13.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/vapor13mds.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/vapor13mds.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/vapor13neymar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/vapor13neymar.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenFootball/vision2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenFootball/vision2.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenGym/MenGym.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './MenGym.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import Metcon6 from './metcon6.jpg';
9 | import AirMonarch from './airMonarch.jpg';
10 | import MatFraser from './matFraser.jpg';
11 | import MaxAlpha from './maxAlpha.jpg';
12 | import AirZoom from './airZoom.jpg';
13 | import Romaleos4 from './romaleos4.jpg';
14 |
15 | const MenGym = () => {
16 | return (
17 |
32 |
113 |
18 |
78 | );
79 | }
80 |
81 | export default MenGym;
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenGym/airMonarch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenGym/airMonarch.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenGym/airZoom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenGym/airZoom.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenGym/matFraser.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenGym/matFraser.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenGym/maxAlpha.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenGym/maxAlpha.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenGym/metcon6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenGym/metcon6.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenGym/romaleos4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenGym/romaleos4.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/MenJordan.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './MenJordan.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import AirMid from './airMid.jpg';
9 | import AirOg from './airOg.jpg';
10 | import Jumpman from './jumpman.jpg';
11 | import ProtoZ from './protoZ.jpg';
12 | import Retro5 from './retro5.jpg';
13 | import Retro14 from './retro14.jpg';
14 | import Westbrook from './westbrook.jpg';
15 | import Zoom92 from './zoom92.jpg';
16 | import ZoomTrunner from './zoomTrunner.jpg';
17 |
18 | const MenJordan = () => {
19 | return (
20 |
28 |
77 |
21 |
105 | );
106 | }
107 |
108 | export default MenJordan;
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/airMid.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/airMid.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/airOg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/airOg.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/jumpman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/jumpman.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/protoZ.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/protoZ.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/retro14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/retro14.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/retro5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/retro5.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/westbrook.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/westbrook.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/zoom92.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/zoom92.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenJordan/zoomTrunner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenJordan/zoomTrunner.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenRunning/MenRunning.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './MenRunning.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import Gravity2 from './gravity2.jpg';
9 | import Pegasus37 from './pegasus37.jpg';
10 | import Quest2 from './quest2.jpg';
11 | import Downshifter10 from './downshifter10.jpg';
12 | import ReactPhantom from './reactPhantom.jpg';
13 | import Miler from './miler.jpg';
14 | import Revolution5 from './revolution5.jpg';
15 |
16 | const MenRunning = () => {
17 | return (
18 |
31 |
104 |
19 |
87 | );
88 | }
89 |
90 | export default MenRunning;
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenRunning/downshifter10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenRunning/downshifter10.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenRunning/gravity2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenRunning/gravity2.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenRunning/miler.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenRunning/miler.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenRunning/pegasus37.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenRunning/pegasus37.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenRunning/quest2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenRunning/quest2.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenRunning/reactPhantom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenRunning/reactPhantom.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenRunning/revolution5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenRunning/revolution5.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenTennis/MenTennis.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './MenTennis.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import Lite2 from './lite2.jpg';
9 | import ZoomX from './zoomX.jpg';
10 | import ZoomTurbo from './zoomTurbo.jpg';
11 | import VaporWing from './vaporWing.jpg';
12 | import Wildcard from './wildcard.jpg';
13 | import Tech20 from './tech20.jpg';
14 | import ZoomZero from './zoomZero.jpg';
15 |
16 | const MenTennis = () => {
17 | return (
18 |
29 |
86 |
19 |
87 | );
88 | }
89 |
90 | export default MenTennis;
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenTennis/lite2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenTennis/lite2.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenTennis/tech20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenTennis/tech20.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenTennis/vaporWing.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenTennis/vaporWing.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenTennis/wildcard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenTennis/wildcard.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenTennis/zoomTurbo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenTennis/zoomTurbo.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenTennis/zoomX.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenTennis/zoomX.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/MenTennis/zoomZero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/MenTennis/zoomZero.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/mBasketball.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/mBasketball.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/mFootball.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/mFootball.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/mGym.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/mGym.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/mJordan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/mJordan.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/mRunning.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/mRunning.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Men/mTennis.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Men/mTennis.jpeg
--------------------------------------------------------------------------------
/src/components/AllShoes/MenWomenFootwear/MenWomenFootwear.css:
--------------------------------------------------------------------------------
1 | .menWomenFootwear {
2 | width: 320px;
3 | height: 398px;
4 | display: flex;
5 | flex-direction: column;
6 | border: 1px solid rgb(177, 177, 177);
7 | box-shadow: 5px 5px 5px rgb(0, 0, 0);
8 | border-radius: 10px;
9 | margin-bottom: 50px;
10 | margin-right: 20px;
11 | }
12 |
13 | .menWomenFootwear > span {
14 | text-align: center;
15 | padding: 10px 0;
16 | font-size: 22px;
17 | font-weight: 500;
18 | text-transform: uppercase;
19 | border-top-left-radius: 10px;
20 | border-top-right-radius: 10px;
21 | border-bottom: 1px solid black;
22 | background: linear-gradient(to right, black, rgb(52, 109, 109));
23 | color: rgb(241, 197, 197);
24 | }
25 |
26 | .shoesimage {
27 | width: 100%;
28 | height: 280px;
29 | filter: brightness(60%);
30 | }
31 |
32 | .view {
33 | width: 95%;
34 | margin: 0 auto;
35 | background: linear-gradient(to left, black, rgb(52, 109, 109));
36 | text-align: center;
37 | padding: 10px 0;
38 | border-radius: 7px;
39 | transition: all 0.5s ease;
40 | cursor: pointer;
41 | }
42 |
43 | .menWomenFootwear__view {
44 | font-size: 20px;
45 | font-weight: 500;
46 | color: rgb(209, 209, 209);
47 | }
48 |
49 | .view:hover {
50 | color: darkslategray;
51 | background: linear-gradient(to left, rgb(255, 137, 156), rgb(53, 43, 43));
52 | }
53 |
54 | @media screen and (max-width: 500px) {
55 | .menWomenFootwear {
56 | width: 240px;
57 | height: 350px;
58 | margin: 0;
59 | margin-bottom: 37px;
60 | }
61 |
62 | .shoesimage {
63 | height: 232px;
64 | }
65 | }
66 |
67 | @media screen and (min-width: 500px) and (max-width: 785px) {
68 | .menWomenFootwear {
69 | width: 270px;
70 | height: 378px;
71 | margin: 0;
72 | margin-bottom: 40px;
73 | }
74 |
75 | .shoesimage {
76 | height: 260px;
77 | }
78 | }
--------------------------------------------------------------------------------
/src/components/AllShoes/MenWomenFootwear/MenWomenFootwear.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | import './MenWomenFootwear.css';
5 | import MGym from '../Men/mGym.jpg';
6 |
7 | const MenWomenFootwear = ({ title, image, pathTo }) => {
8 | return (
9 |
29 |
86 |
10 | {title}
11 |
12 | 
13 |
18 | );
19 | }
20 |
21 | export default MenWomenFootwear;
--------------------------------------------------------------------------------
/src/components/AllShoes/ShoeComponent/ShoeComponent.css:
--------------------------------------------------------------------------------
1 | .shoeComponent {
2 | width: 300px;
3 | height: 500px;
4 | border: 1px solid rgb(212, 212, 212);
5 | box-shadow: 5px 5px 5px rgb(179, 179, 179);
6 | margin-left: 25px;
7 | margin-bottom: 55px;
8 | display: flex;
9 | flex-direction: column;
10 | }
11 |
12 | .shoeComponent > img {
13 | width: 300px;
14 | height: 300px;
15 | }
16 |
17 | .shoeComponent__name1 {
18 | background: linear-gradient(to right, rgb(211, 210, 210), rgb(236, 143, 143));
19 | text-align: center;
20 | padding: 7px 0;
21 | font-size: 20px;
22 | font-weight: 500;
23 | }
24 | /* .shoeComponent__name2 {
25 | background: linear-gradient(to right, rgb(211, 210, 210), rgb(236, 143, 143));
26 | text-align: center;
27 | padding: 7px 0;
28 | font-size: 20px;
29 | font-weight: 500;
30 | }
31 | .shoeComponent__name3 {
32 | background: linear-gradient(to right, rgb(211, 210, 210), rgb(236, 143, 143));
33 | text-align: center;
34 | padding: 7px 0;
35 | font-size: 20px;
36 | font-weight: 500;
37 | } */
38 |
39 | .shoeComponent__price {
40 | display: flex;
41 | align-items: center;
42 | justify-content: space-between;
43 | padding: 8px 10px;
44 | border-bottom: 1px solid rgb(206, 206, 206);
45 | }
46 |
47 | .shoeComponent__before {
48 | width: 50%;
49 | border-right: 1px solid rgb(175, 175, 175);
50 | color: rgb(54, 54, 54);
51 | font-size: 16px;
52 | font-weight: 400;
53 | }
54 |
55 | .shoeComponent__beforePrice {
56 | color: red;
57 | font-size: 20px;
58 | font-weight: 500;
59 | text-decoration: line-through;
60 | }
61 |
62 | .shoeComponent__after {
63 | width: 50%;
64 | text-align: right;
65 | color: rgb(54, 54, 54);
66 | font-size: 16px;
67 | font-weight: 400;
68 | }
69 |
70 | .shoeComponent__afterPrice {
71 | color: rgb(3, 161, 3);
72 | font-size: 20px;
73 | font-weight: 500;
74 | }
75 |
76 | .shoeComponent__category {
77 | color: rgb(109, 109, 109);
78 | margin: 7px;
79 | font-size: 16px;
80 | font-weight: 400;
81 | }
82 |
83 | .shoeComponent__add {
84 | background: linear-gradient(to right, black, darkslategray);
85 | color: rgb(221, 221, 221);
86 | min-width: 91%;
87 | margin: 0 auto;
88 | margin-top: 15px;
89 | padding: 7px 0;
90 | display: flex;
91 | flex-direction: column;
92 | align-items: center;
93 | border-radius: 7px;
94 | border: 1px solid black;
95 | cursor: pointer;
96 | transition: all 0.5s ease;
97 | }
98 |
99 | .shoeComponent__add:hover {
100 | background: white;
101 | color: black;
102 | }
103 |
104 | .oneMore {
105 | display: flex;
106 | align-items: center;
107 | /* background: linear-gradient(to right, black, darkslategray);
108 | color: rgb(221, 221, 221);
109 | width: 50%;
110 | margin: 0 auto;
111 | margin-top: 15px;
112 | padding: 6px 7px;
113 | border-radius: 7px;
114 | border: 1px solid black;
115 | cursor: pointer;
116 | transition: all 0.5s ease; */
117 | }
118 |
119 | /* .oneMore:hover {
120 | background: white;
121 | color: black;
122 | } */
123 |
124 | .oneMore > span {
125 | font-size: 18px;
126 | margin-right: 13px;
127 | }
128 |
129 | @media screen and (max-width: 600px) {
130 | .shoeComponent {
131 | width: 200px;
132 | height: 340px;
133 | /* margin-left: 25px;
134 | margin-bottom: 55px; */
135 | /* margin-left: 15px; */
136 | /* margin-left: 10px; */
137 | margin-bottom: 40px;
138 | }
139 |
140 | .shoeComponent > img {
141 | width: 200px;
142 | height: 200px;
143 | }
144 |
145 | .shoeComponent__name1 {
146 | padding: 5px 0;
147 | font-size: 13px;
148 | }
149 |
150 | .shoeComponent__price {
151 | padding: 4px 8px;
152 | }
153 |
154 | .shoeComponent__before {
155 | font-size: 12px;
156 | }
157 |
158 | .shoeComponent__beforePrice {
159 | font-size: 14px;
160 | }
161 |
162 | .shoeComponent__after {
163 | font-size: 12px;
164 | }
165 |
166 | .shoeComponent__afterPrice {
167 | font-size: 14px;
168 | }
169 |
170 | .shoeComponent__category {
171 | margin: 4px;
172 | font-size: 11px;
173 | }
174 |
175 | .shoeComponent__add {
176 | min-width: 80%;
177 | margin-top: 10px;
178 | padding: 5px 0;
179 | border-radius: 5px;
180 | }
181 |
182 | .shoeComponent__add:hover {
183 | background: white;
184 | color: black;
185 | }
186 |
187 | .oneMore > span {
188 | font-size: 15px;
189 | margin-right: 13px;
190 | }
191 | }
192 |
193 | @media screen and (min-width: 600px) and (max-width: 980px) {
194 | .shoeComponent {
195 | width: 200px;
196 | height: 340px;
197 | /* margin-left: 25px;
198 | margin-bottom: 55px; */
199 | /* margin-left: 15px; */
200 | /* margin-left: 10px; */
201 | margin-bottom: 40px;
202 | }
203 |
204 | .shoeComponent > img {
205 | width: 200px;
206 | height: 200px;
207 | }
208 |
209 | .shoeComponent__name1 {
210 | padding: 5px 0;
211 | font-size: 13px;
212 | }
213 |
214 | .shoeComponent__price {
215 | padding: 4px 8px;
216 | }
217 |
218 | .shoeComponent__before {
219 | font-size: 12px;
220 | }
221 |
222 | .shoeComponent__beforePrice {
223 | font-size: 14px;
224 | }
225 |
226 | .shoeComponent__after {
227 | font-size: 12px;
228 | }
229 |
230 | .shoeComponent__afterPrice {
231 | font-size: 14px;
232 | }
233 |
234 | .shoeComponent__category {
235 | margin: 4px;
236 | font-size: 11px;
237 | }
238 |
239 | .shoeComponent__add {
240 | min-width: 80%;
241 | margin-top: 10px;
242 | padding: 5px 0;
243 | border-radius: 5px;
244 | }
245 |
246 | .shoeComponent__add:hover {
247 | background: white;
248 | color: black;
249 | }
250 |
251 | .oneMore > span {
252 | font-size: 15px;
253 | margin-right: 13px;
254 | }
255 | }
--------------------------------------------------------------------------------
/src/components/AllShoes/ShoeComponent/ShoeComponent.js:
--------------------------------------------------------------------------------
1 | // MEN
2 | // 1- mengym --- 100000
3 | // 2- mentennis --- 200000
4 | // 3- menjordan --- 300000
5 | // 4- menrunning --- 400000
6 | // 5- menfootball --- 500000
7 | // 6- menbasketball --- 600000
8 |
9 | // WOMEN
10 | // 1- womengym --- 110000
11 | // 2- womentennis --- 220000
12 | // 3- womenjordan --- 330000
13 | // 4- womenrunning --- 440000
14 | // 5- womenfootball --- 550000
15 | // 6- womenbasketball --- 660000
16 |
17 | import React from 'react';
18 |
19 | import ShoppingCartRoundedIcon from '@material-ui/icons/ShoppingCartRounded';
20 |
21 | import './ShoeComponent.css';
22 | import { useStateValue } from '../../StateProvider/StateProvider';
23 |
24 | const ShoeComponent = ({ image, id, title, before, after, category }) => {
25 |
26 | const [{ cart }, dispatch] = useStateValue();
27 |
28 | const addToCart = () => {
29 | dispatch({
30 | type: 'ADD_TO_CART',
31 | item: {
32 | id: id,
33 | image: image,
34 | title: title,
35 | before: before,
36 | after: after,
37 | category: category,
38 | },
39 | })
40 | };
41 |
42 | return (
43 |
14 | Click here to View All
15 |
16 |
17 |
44 |
45 |
61 | );
62 | }
63 |
64 | export default ShoeComponent;
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/Women.css:
--------------------------------------------------------------------------------
1 | /* .men {
2 | max-width: 100vw;
3 | background: linear-gradient(to right, rgb(187, 0, 0), rgb(252, 27, 27));
4 | }
5 |
6 | .men__shoes {
7 | margin-left: 20vw;
8 | margin-right: 30px;
9 | margin-top: 30px;
10 | border: 1px solid black;
11 | height: 100vh;
12 | } */
13 |
14 | .women {
15 | max-width: 100vw;
16 | height: 100%;
17 | background: linear-gradient(to right, rgb(226, 151, 151), rgb(214, 211, 211));
18 | }
19 |
20 | .women__categories {
21 | margin: 50px;
22 | display: flex;
23 | flex-wrap: wrap;
24 | justify-content: space-between;
25 | }
26 |
27 | @media screen and (max-width: 500px) {
28 | .women__categories {
29 | margin: 0;
30 | margin-top: 18px;
31 | /* margin: 0 15px; */
32 | flex-direction: column;
33 | align-items: center;
34 | }
35 | }
36 |
37 | @media screen and (min-width: 500px) and (max-width: 785px) {
38 | .women__categories {
39 | margin: 0;
40 | margin-top: 20px;
41 | /* margin: 0 15px; */
42 | flex-direction: column;
43 | align-items: center;
44 | }
45 | }
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/Women.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './Women.css';
4 | import MenWomenFootwear from '../MenWomenFootwear/MenWomenFootwear';
5 | // import AllShoes_Navbar from '../AllShoes_Navbar/AllShoes_Navbar';
6 | import WGym from './wGym.jpg';
7 | import WTennis from './wTennis.jpg';
8 | import WJordan from './wJordan.jpg';
9 | import WRunning from './wRunning.jpg';
10 | import WFootball from './wFootball.jpg';
11 | import WBasketball from './wBasketball.jpg';
12 |
13 | const Women = () => {
14 | return (
15 |
46 | {title}
47 |
48 |
49 | Before: ${before}
50 | Now: ${after}
51 |
52 | {category}
53 |
54 |
59 | {/* */}
60 |
55 | Add To Cart
56 |
58 |
16 | {/*
60 | );
61 | }
62 |
63 | export default Women;
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenBasketball/WomenBasketball.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './WomenBasketball.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import AirMax from './airMax.jpg';
9 | import Freak1 from './freak1.jpg';
10 | import Kyrie4 from './kyrie4.jpg';
11 | import Lebron17 from './lebron17.jpg';
12 | import Precision4 from './precision4.jpg';
13 | import Soldier14 from './soldier14.jpg';
14 | import Trey5 from './trey5.jpg';
15 |
16 |
17 | const WomenBasketball = () => {
18 | return (
19 |
27 |
58 | .
59 |
20 |
88 | );
89 | }
90 |
91 | export default WomenBasketball;
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenBasketball/airMax.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenBasketball/airMax.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenBasketball/freak1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenBasketball/freak1.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenBasketball/kyrie4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenBasketball/kyrie4.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenBasketball/lebron17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenBasketball/lebron17.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenBasketball/precision4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenBasketball/precision4.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenBasketball/soldier14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenBasketball/soldier14.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenBasketball/trey5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenBasketball/trey5.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenFootball/WomenFootball.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './WomenFootball.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import PhantomGT from '../../Men/MenFootball/phantomGT.jpg';
9 | import PhantomGTclub from '../../Men/MenFootball/phantomGTclub.jpg';
10 | import Superfly7 from '../../Men/MenFootball/superfly7.jpg';
11 | import Tiempo8 from '../../Men/MenFootball/tiempo8.jpg';
12 | import Superfly7pro from '../../Men/MenFootball/superfly7pro.jpg';
13 | import Vapor13 from '../../Men/MenFootball/vapor13.jpg';
14 | import Vapor13mds from '../../Men/MenFootball/vapor13mds.jpg';
15 | import Vision2 from '../../Men/MenFootball/vision2.jpg';
16 | import Vapor13neymar from '../../Men/MenFootball/vapor13neymar.jpg';
17 | import Legend8 from '../../Men/MenFootball/legend8.jpg';
18 |
19 | const WomenFootball = () => {
20 | return (
21 |
30 |
87 |
22 |
114 | );
115 | }
116 |
117 | export default WomenFootball;
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenGym/WomenGym.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './WomenGym.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import AirZoom from './airZoom.jpg';
9 | import Metcon3 from './metcon3.jpg';
10 | import SuperRep from './superrep.jpg';
11 | import Metcon6 from './metcon6.jpg';
12 | import Metcon6You from './metcon6you.jpg';
13 | import Legend from './legend.jpg';
14 |
15 | const WomenGym = () => {
16 | return (
17 |
32 |
113 |
18 |
78 | );
79 | }
80 |
81 | export default WomenGym;
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenGym/airZoom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenGym/airZoom.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenGym/legend.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenGym/legend.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenGym/metcon3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenGym/metcon3.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenGym/metcon6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenGym/metcon6.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenGym/metcon6you.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenGym/metcon6you.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenGym/superrep.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenGym/superrep.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenJordan/WomenJordan.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './WomenJordan.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import Retro4 from './retro4.jpg';
9 | import Delta from './delta.jpg';
10 | import Max200 from './max200.jpg';
11 | import Latitude from './latitude.jpg';
12 | import JordanOG from './jordanOG.jpg';
13 | import Low11 from './low11.jpg';
14 |
15 | const WomenJordan = () => {
16 | return (
17 |
28 |
77 |
18 |
78 | );
79 | }
80 |
81 | export default WomenJordan;
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenJordan/delta.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenJordan/delta.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenJordan/jordanOG.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenJordan/jordanOG.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenJordan/latitude.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenJordan/latitude.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenJordan/low11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenJordan/low11.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenJordan/max200.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenJordan/max200.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenJordan/retro4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenJordan/retro4.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenRunning/WomenRunning.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './WomenRunning.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import Pegasus37 from './pegasus37.jpg';
9 | import Fly3 from './fly3.jpg';
10 | import InfinityRun from './infinityRun.jpg';
11 | import AllDay from './allDay.jpg';
12 | import PhantomRun from './phantomRun.jpg';
13 | import React3 from './react3.jpg';
14 | import Flex8 from './flex8.jpg';
15 |
16 | const WomenRunning = () => {
17 | return (
18 |
28 |
77 |
19 |
87 | );
88 | }
89 |
90 | export default WomenRunning;
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenRunning/allDay.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenRunning/allDay.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenRunning/flex8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenRunning/flex8.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenRunning/fly3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenRunning/fly3.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenRunning/infinityRun.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenRunning/infinityRun.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenRunning/pegasus37.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenRunning/pegasus37.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenRunning/phantomRun.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenRunning/phantomRun.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenRunning/react3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenRunning/react3.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenTennis/WomenTennis.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // import './WomenTennis.css';
4 | import AllShoes_Navbar from '../../AllShoes_Navbar/AllShoes_Navbar';
5 | import ShoeComponent from '../../ShoeComponent/ShoeComponent';
6 | import AllShoes from '../../AllShoes.css';
7 |
8 | import VaporX from './vaporX.jpg';
9 | import Wildcard from './wildcard.jpg';
10 | import ZoomZero from './zoomZero.jpg';
11 | import ZoomGP from './zoomGP.jpg';
12 | import Lite2 from './lite2.jpg';
13 |
14 | const WomenTennis = () => {
15 | return (
16 |
29 |
86 |
17 |
69 | );
70 | }
71 |
72 | export default WomenTennis;
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenTennis/lite2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenTennis/lite2.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenTennis/vaporX.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenTennis/vaporX.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenTennis/wildcard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenTennis/wildcard.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenTennis/zoomGP.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenTennis/zoomGP.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/WomenTennis/zoomZero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/WomenTennis/zoomZero.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/wBasketball.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/wBasketball.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/wFootball.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/wFootball.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/wGym.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/wGym.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/wJordan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/wJordan.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/wRunning.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/wRunning.jpg
--------------------------------------------------------------------------------
/src/components/AllShoes/Women/wTennis.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/AllShoes/Women/wTennis.jpg
--------------------------------------------------------------------------------
/src/components/Checkout/Checkout.css:
--------------------------------------------------------------------------------
1 | .checkout {
2 | max-width: 100vw;
3 | min-height: 100vh;
4 | background: linear-gradient(to right, rgb(39, 39, 39), rgb(71, 126, 126));
5 | }
6 |
7 | .checkout__empty {
8 | margin-top: 40px;
9 | background: linear-gradient(to right, pink, rgb(228, 228, 228));
10 | display: flex;
11 | flex-direction: column;
12 | width: 70%;
13 | margin-left: auto;
14 | margin-right: auto;
15 | align-items: center;
16 | border: 1px solid pink;
17 | box-shadow: 2px 2px 2px pink;
18 | border-radius: 40px;
19 | padding: 20px 0;
20 | }
21 |
22 | .checkout__empty1 {
23 | color: rgb(43, 43, 43);
24 | font-size: 30px;
25 | text-decoration: underline;
26 | margin-bottom: 25px;
27 | width: 80%;
28 | text-align: center;
29 | }
30 |
31 | .checkout__empty2 {
32 | font-size: 20px;
33 | color: rgb(88, 88, 88);
34 | width: 80%;
35 | text-align: center;
36 | }
37 |
38 | .checkout__notEmpty {
39 | max-width: 100%;
40 | display: flex;
41 | flex-direction: column;
42 | align-items: center;
43 | }
44 |
45 | .checkout__notEmpty > span {
46 | margin-top: 35px;
47 | margin-bottom: 50px;
48 | color: rgb(226, 225, 225);
49 | text-decoration: underline;
50 | font-size: 30px;
51 | }
52 |
53 | @media screen and (max-width: 450px) {
54 | .checkout__empty {
55 | margin-top: 25px;
56 | width: 70%;
57 | border-radius: 20px;
58 | padding: 15px 0;
59 | }
60 |
61 | .checkout__empty1 {
62 | font-size: 20px;
63 | margin-bottom: 18px;
64 | width: 80%;
65 | }
66 |
67 | .checkout__empty2 {
68 | font-size: 16px;
69 | width: 80%;
70 | }
71 |
72 | .checkout__notEmpty > span {
73 | margin-top: 12px;
74 | margin-bottom: 33px;
75 | color: rgb(226, 225, 225);
76 | text-decoration: underline;
77 | font-size: 20px;
78 | }
79 | }
--------------------------------------------------------------------------------
/src/components/Checkout/Checkout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useStateValue } from '../StateProvider/StateProvider';
3 |
4 | import './Checkout.css';
5 | import ShoeItem from './ShoeItem/ShoeItem';
6 | import TotalPrice from './TotalPrice/TotalPrice';
7 |
8 | const Checkout = () => {
9 |
10 | const [{ cart }, dispatch] = useStateValue();
11 |
12 | return (
13 |
27 |
68 |
14 | .
15 |
43 | );
44 | }
45 |
46 | export default Checkout;
--------------------------------------------------------------------------------
/src/components/Checkout/ShoeItem/ShoeItem.css:
--------------------------------------------------------------------------------
1 | .shoeItem {
2 | margin-bottom: 60px;
3 | border: 3px solid black;
4 | box-shadow: 5px 5px 5px black;
5 | border-radius: 20px;
6 | width: 60%;
7 | margin-left: auto;
8 | margin-right: auto;
9 | display: flex;
10 | }
11 |
12 | .shoeItem > img {
13 | width: 320px;
14 | height: 300px;
15 | border-right: 1px solid black;
16 | width: 40%;
17 | border-top-left-radius: 20px;
18 | border-bottom-left-radius: 20px;
19 | }
20 |
21 | .shoeItem__right {
22 | display: flex;
23 | flex-direction: column;
24 | width: 60%;
25 | background: linear-gradient(to right, rgb(233, 233, 233), rgb(199, 199, 199));
26 | border-top-right-radius: 20px;
27 | border-bottom-right-radius: 20px;
28 | }
29 |
30 | .shoeItem__title {
31 | background: linear-gradient(to right, rgb(123, 191, 214), rgb(245, 198, 198));
32 | width: 100%;
33 | font-size: 25px;
34 | font-weight: 600;
35 | text-align: center;
36 | padding: 15px 0;
37 | color: rgb(58, 57, 57);
38 | border-top-right-radius: 20px;
39 | border-bottom: 1px solid black;
40 | }
41 |
42 | .shoeItem__category {
43 | margin-top: 10px;
44 | font-size: 17px;
45 | font-weight: 400;
46 | color: rgb(94, 93, 93);
47 | text-align: center;
48 | }
49 |
50 | .shoeItem__price {
51 | margin-top: 60px;
52 | text-align: center;
53 | color: rgb(0, 87, 0);
54 | font-size: 25px;
55 | }
56 |
57 | .shoeItem__afterPrice {
58 | letter-spacing: 1px;
59 | color: rgb(0, 179, 0);
60 | font-size: 35px;
61 | font-weight: 500;
62 | }
63 |
64 | .shoeItem__remove {
65 | background: linear-gradient(to right, brown, rgb(223, 102, 102));
66 | margin-top: 18px;
67 | width: 250px;
68 | margin-left: auto;
69 | margin-right: auto;
70 | display: flex;
71 | align-items: center;
72 | color: rgb(216, 216, 216);
73 | font-size: 20px;
74 | font-weight: 500;
75 | padding: 7px 0;
76 | border-radius: 10px;
77 | cursor: pointer;
78 | border: 1px solid brown;
79 | transition: all 0.5s ease;
80 | }
81 |
82 | .shoeItem__click {
83 | padding-left: 15px;
84 | padding-right: 7px;
85 | }
86 |
87 | .shoeItem__remove:hover {
88 | background: linear-gradient(to left, rgb(184, 183, 183), white);
89 | color: black;
90 | }
91 |
92 | @media screen and (max-width: 360px) {
93 | .shoeItem {
94 | margin-bottom: 40px;
95 | border-radius: 10px;
96 | width: 80%;
97 | height: 400px;
98 | flex-direction: column;
99 | align-items: center;
100 | }
101 |
102 | .shoeItem > img {
103 | width: 100%;
104 | height: 220px;
105 | border-top-left-radius: 10px;
106 | border-top-right-radius: 10px;
107 | border-bottom-left-radius: 0;
108 | }
109 |
110 | .shoeItem__right {
111 | width: 100%;
112 | height: 100%;
113 | border-top-right-radius: 0;
114 | border-bottom-right-radius: 10px;
115 | border-bottom-left-radius: 10px;
116 | }
117 |
118 | .shoeItem__title {
119 | width: 100%;
120 | font-size: 15px;
121 | padding: 7px 0;
122 | border-top-right-radius: 0;
123 | border-top: 1px solid black;
124 | }
125 |
126 | .shoeItem__category {
127 | margin-top: 10px;
128 | font-size: 14px;
129 | }
130 |
131 | .shoeItem__price {
132 | margin-top: 16px;
133 | font-size: 18px;
134 | }
135 |
136 | .shoeItem__afterPrice {
137 | font-size: 21px;
138 | }
139 |
140 | .shoeItem__remove {
141 | margin-top: 13px;
142 | width: 180px;
143 | font-size: 14px;
144 | padding: 6px 0;
145 | border-radius: 7px;
146 | }
147 | }
148 |
149 | @media screen and (min-width: 360px) and (max-width: 550px) {
150 | .shoeItem {
151 | margin-bottom: 40px;
152 | border-radius: 10px;
153 | width: 60%;
154 | height: 400px;
155 | flex-direction: column;
156 | align-items: center;
157 | }
158 |
159 | .shoeItem > img {
160 | width: 100%;
161 | height: 220px;
162 | border-top-left-radius: 10px;
163 | border-top-right-radius: 10px;
164 | border-bottom-left-radius: 0;
165 | }
166 |
167 | .shoeItem__right {
168 | width: 100%;
169 | height: 100%;
170 | border-top-right-radius: 0;
171 | border-bottom-right-radius: 10px;
172 | border-bottom-left-radius: 10px;
173 | }
174 |
175 | .shoeItem__title {
176 | width: 100%;
177 | font-size: 15px;
178 | padding: 7px 0;
179 | border-top-right-radius: 0;
180 | border-top: 1px solid black;
181 | }
182 |
183 | .shoeItem__category {
184 | margin-top: 10px;
185 | font-size: 14px;
186 | }
187 |
188 | .shoeItem__price {
189 | margin-top: 16px;
190 | font-size: 18px;
191 | }
192 |
193 | .shoeItem__afterPrice {
194 | font-size: 21px;
195 | }
196 |
197 | .shoeItem__remove {
198 | margin-top: 13px;
199 | width: 180px;
200 | font-size: 14px;
201 | padding: 6px 0;
202 | border-radius: 7px;
203 | }
204 | }
205 |
206 | @media screen and (min-width: 550px) and (max-width: 800px) {
207 | .shoeItem {
208 | margin-bottom: 40px;
209 | border-radius: 10px;
210 | width: 40%;
211 | height: 400px;
212 | flex-direction: column;
213 | align-items: center;
214 | }
215 |
216 | .shoeItem > img {
217 | width: 100%;
218 | height: 220px;
219 | border-top-left-radius: 10px;
220 | border-top-right-radius: 10px;
221 | border-bottom-left-radius: 0;
222 | }
223 |
224 | .shoeItem__right {
225 | width: 100%;
226 | height: 100%;
227 | border-top-right-radius: 0;
228 | border-bottom-right-radius: 10px;
229 | border-bottom-left-radius: 10px;
230 | }
231 |
232 | .shoeItem__title {
233 | width: 100%;
234 | font-size: 15px;
235 | padding: 7px 0;
236 | border-top-right-radius: 0;
237 | border-top: 1px solid black;
238 | }
239 |
240 | .shoeItem__category {
241 | margin-top: 10px;
242 | font-size: 14px;
243 | }
244 |
245 | .shoeItem__price {
246 | margin-top: 16px;
247 | font-size: 18px;
248 | }
249 |
250 | .shoeItem__afterPrice {
251 | font-size: 21px;
252 | }
253 |
254 | .shoeItem__remove {
255 | margin-top: 13px;
256 | width: 180px;
257 | font-size: 14px;
258 | padding: 6px 0;
259 | border-radius: 7px;
260 | }
261 | }
262 |
263 | @media screen and (min-width: 800px) and (max-width: 1000px) {
264 | .shoeItem {
265 | width: 80%;
266 | margin-left: auto;
267 | margin-right: auto;
268 | display: flex;
269 | }
270 |
271 | .shoeItem > img {
272 | width: 320px;
273 | height: 270px;
274 | width: 40%;
275 | }
276 |
277 | .shoeItem__title {
278 | font-size: 20px;
279 | padding: 12px 0;
280 | }
281 |
282 | .shoeItem__category {
283 | font-size: 15px;
284 | }
285 |
286 | .shoeItem__price {
287 | margin-top: 60px;
288 | font-size: 20px;
289 | }
290 |
291 | .shoeItem__afterPrice {
292 | font-size: 30px;
293 | }
294 | }
--------------------------------------------------------------------------------
/src/components/Checkout/ShoeItem/ShoeItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './ShoeItem.css';
4 | import ShoppingCartRoundedIcon from '@material-ui/icons/ShoppingCartRounded';
5 | import { useStateValue } from '../../StateProvider/StateProvider';
6 |
7 | const ShoeItem = ({ id, image, title, before, after, category }) => {
8 |
9 | const [{ cart }, dispatch] = useStateValue();
10 |
11 | const removeFromCart = () => {
12 | dispatch({
13 | type: "REMOVE_FROM_CART",
14 | id: id,
15 | });
16 | }
17 |
18 | return (
19 |
16 | {cart?.length === 0 ? (
17 |
37 | {cart?.length > 0 && (
38 |
18 | Your Shopping Cart is Empty
19 | You have no items in your cart. To buy one or more items, click 'Add To Cart' next to the item.
20 |
21 | ) : (
22 |
23 | Your Shopping Cart
24 | {cart?.map(item => (
25 |
35 | )}
36 |
39 |
41 | )}
42 |
20 |
21 |
35 | );
36 | }
37 |
38 | export default ShoeItem;
--------------------------------------------------------------------------------
/src/components/Checkout/TotalPrice/TotalPrice.css:
--------------------------------------------------------------------------------
1 | .totalPrice {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | background: linear-gradient(to right, rgb(187, 187, 187), rgb(223, 223, 223));
6 | max-width: 100%;
7 | }
8 |
9 | .totalPrice__items {
10 | margin-top: 25px;
11 | margin-bottom: 10px;
12 | font-size: 20px;
13 | color: rgb(39, 39, 39);
14 | font-weight: 500;
15 | }
16 |
17 | .totalPrice__total {
18 | margin-bottom: 20px;
19 | font-size: 20px;
20 | font-weight: 500;
21 | color: rgb(39, 39, 39);
22 | }
23 |
24 | button {
25 | width: 220px;
26 | margin-bottom: 25px;
27 | outline: none;
28 | border: none;
29 | border: 1px solid black;
30 | font-size: 20px;
31 | font-weight: 400;
32 | background: linear-gradient(to left, rgb(36, 36, 36), rgb(65, 110, 110));
33 | color: rgb(221, 221, 221);
34 | padding: 7px 0;
35 | align-items: center;
36 | border-radius: 6px;
37 | cursor: pointer;
38 | transition: all 0.5s ease;
39 | }
40 |
41 | button:hover {
42 | background: linear-gradient(to left, rgb(255, 184, 196), rgb(184, 184, 184));
43 | color: black;
44 | }
45 |
46 | @media screen and (max-width: 470px) {
47 | .totalPrice__items {
48 | width: 85%;
49 | margin-left: auto;
50 | margin-right: auto;
51 | text-align: center;
52 | margin-top: 17px;
53 | margin-bottom: 8px;
54 | font-size: 15px;
55 | }
56 |
57 | .totalPrice__total {
58 | width: 85%;
59 | margin-left: auto;
60 | margin-right: auto;
61 | text-align: center;
62 | margin-bottom: 15px;
63 | font-size: 15px;
64 | }
65 |
66 | button {
67 | width: 170px;
68 | margin-bottom: 20px;
69 | font-size: 15px;
70 | padding: 6px 0;
71 | border-radius: 5px;
72 | }
73 | }
--------------------------------------------------------------------------------
/src/components/Checkout/TotalPrice/TotalPrice.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './TotalPrice.css';
4 | import CurrencyFormat from 'react-currency-format';
5 | import { useStateValue } from '../../StateProvider/StateProvider';
6 | import { getCartTotal } from '../../StateProvider/reducer';
7 | import stripeCheckout from 'react-stripe-checkout';
8 | import StripeCheckout from 'react-stripe-checkout';
9 |
10 | const TotalPrice = () => {
11 |
12 | const [{ cart }, dispatch] = useStateValue();
13 |
14 | const handleToken = (token, addresses) => {
15 | console.log({ token, addresses });
16 | alert("Cannot recognize your payment info. Please enter correct data to proceed further.");
17 | }
18 |
19 | return (
20 |
22 | {title}
23 | {category}
24 | {/*
34 |
25 | Before: {before}
26 | After: {after}
27 |
*/}
28 | Price: ${after}
29 |
30 | Remove From Cart
31 |
33 |
21 | (
24 | <>
25 | Total number of Items in your cart: {cart?.length}
26 | Total Price of your items: {`${value}`}
27 |
28 | )}
29 |
30 | decimalScale={2}
31 | value={getCartTotal(cart)}
32 | displayType={"text"}
33 | thousandSeparator={true}
34 | prefix={"$"}
35 | />
36 | {/* */}
37 |
44 | );
45 | }
46 |
47 | export default TotalPrice;
--------------------------------------------------------------------------------
/src/components/Header/Header.css:
--------------------------------------------------------------------------------
1 | .header {
2 | max-width: 100vw;
3 | height: 60px;
4 | top: 0;
5 | left: 0;
6 | background: linear-gradient(to right, rgb(221, 221, 221), white);
7 | box-shadow: 0 2px 2px rgb(185, 185, 185);
8 | position: sticky;
9 | z-index: 100;
10 | display: flex;
11 | justify-content: space-between;
12 | align-items: center;
13 | padding: 0 15px;
14 | }
15 |
16 | .header__menu {
17 | display: none;
18 | }
19 |
20 | .header__logo {
21 | width: 130px;
22 | height: 100px;
23 | object-fit: contain;
24 | cursor: pointer;
25 | /* flex: 0.2; */
26 | }
27 |
28 | .header__nav {
29 | display: flex;
30 | /* width: 60%; */
31 | /* justify-content: space-between; */
32 | align-items: center;
33 | /* flex: 0.8; */
34 | }
35 |
36 | .header__navItems {
37 | /* padding-right: 35px; */
38 | font-size: 17px;
39 | font-weight: 500;
40 | color: black;
41 | padding: 6px 13px;
42 | margin-right: 30px;
43 | border-radius: 12px;
44 | transition: 0.5s all ease;
45 | }
46 |
47 | .header__navItems:hover {
48 | /* background-color: rgb(27, 27, 27); */
49 | background-color: rgb(221, 4, 4);
50 | color: white;
51 | cursor: pointer;
52 | box-shadow: 2px 2px 5px rgb(224, 6, 6);
53 | text-shadow: 0 0 2px rgb(219, 219, 219);
54 | }
55 |
56 | .header__navRight {
57 | display: flex;
58 | align-items: center;
59 | }
60 |
61 | .header__user {
62 | display: flex;
63 | flex-direction: column;
64 | align-items: center;
65 | margin-right: 12px;
66 | }
67 |
68 | .header__hello {
69 | color: rgb(15, 15, 15);
70 | font-size: 14px;
71 | }
72 |
73 | .header__mail {
74 | font-size: 12px;
75 | color: rgb(65, 65, 65);
76 | }
77 |
78 | .header__navRightItems {
79 | color: rgb(196, 0, 0);
80 | margin-right: 25px;
81 | /* padding: 10px 5px; */
82 | transition: all 0.5s ease;
83 | font-size: 14px;
84 | }
85 |
86 | .header__navRightItems:hover {
87 | color: black;
88 | text-shadow: 0 0 1px black;
89 | }
90 |
91 | .header__cart {
92 | color: black;
93 | margin-top: 7px;
94 | }
95 |
96 | .header__cartItems {
97 | background-color: rgb(221, 3, 3);
98 | color: white;
99 | font-size: 12px;
100 | padding: 0 3px;
101 | border-radius: 3px;
102 | margin-top: -23px;
103 | margin-left: -6px;
104 | z-index: -1;
105 | }
106 |
107 | .header2 {
108 | display: none;
109 | }
110 |
111 | @media screen and (max-width: 900px) {
112 | .header {
113 | height: 50px;
114 | }
115 |
116 | .header__nav {
117 | display: none;
118 | }
119 |
120 | .header__user {
121 | display: none;
122 | }
123 |
124 | .header__logo {
125 | width: 100px;
126 | height: 55px;
127 | }
128 |
129 | .header__menu {
130 | display: block;
131 | }
132 |
133 | .header2 {
134 | display: flex;
135 | flex-direction: column;
136 | align-items: center;
137 | width: 100%;
138 | background: linear-gradient(to right, rgb(43, 43, 43), rgb(49, 116, 116));
139 | height: 100vh;
140 | position: fixed;
141 | z-index: 300;
142 | top: 0;
143 | right: 100%;
144 | /* transform: translateX(-100%); */
145 | transition: 850ms;
146 | }
147 |
148 | .header2.active {
149 | right: 0;
150 | /* transform: translateX(100%); */
151 | transition: 350ms;
152 | }
153 |
154 | .header2__close {
155 | color: rgb(31, 31, 31);
156 | margin-top: 20px;
157 | margin-bottom: 40px;
158 | cursor: pointer;
159 | background-color: rgb(216, 216, 216);
160 | border-radius: 50%;
161 | padding-top: 5px;
162 | padding-left: 5px;
163 | padding-right: 5px;
164 | }
165 |
166 | .header2__nav {
167 | /* position: absolute;
168 | margin-top: 50px; */
169 | display: flex;
170 | flex-direction: column;
171 | align-items: center;
172 | max-width: 100%;
173 | }
174 |
175 | .header2__user {
176 | display: flex;
177 | flex-direction: column;
178 | align-items: center;
179 | margin-bottom: 30px;
180 | background: linear-gradient(to right, rgb(175, 175, 175), rgb(233, 233, 233));
181 | width: 100%;
182 | border-radius: 10px;
183 | padding: 10px 5px;
184 | }
185 |
186 | .header2__hello {
187 | font-size: 17px;
188 | margin-bottom: 20px;
189 | color: black;
190 | }
191 |
192 | .header2__mail {
193 | color: rgb(61, 61, 61);
194 | font-size: 13px;
195 | }
196 |
197 | .header2__navSign {
198 | background: linear-gradient(to right, rgb(43, 43, 43), rgb(49, 116, 116));
199 | /* background: linear-gradient(to right, rgb(131, 0, 0), rgb(219, 0, 0)); */
200 | color: rgb(231, 231, 231);
201 | padding: 5px 10px;
202 | border-radius: 7px;
203 | cursor: pointer;
204 | border: 1px solid black;
205 | transition: all 0.5 ease;
206 | }
207 |
208 | .header2__navSign:hover {
209 | background: linear-gradient(to right,rgb(160, 160, 160), rgb(236, 236, 236));
210 | color: black;
211 | }
212 |
213 | .header2__navItem {
214 | margin-top: 40px;
215 | }
216 |
217 | .header2__navItems {
218 | position: relative;
219 | /* background-color: black; */
220 | font-size: 18px;
221 | color: rgb(224, 224, 224);
222 | font-weight: 500;
223 | padding: 8px 15px;
224 | cursor: pointer;
225 | border-radius: 10px;
226 | transition: all 0.5s ease;
227 | border: 1px solid rgb(209, 209, 209);
228 | }
229 |
230 | .header2__navItems:hover {
231 | background: linear-gradient(to right, rgb(156, 156, 156), rgb(219, 219, 219));
232 | color: rgb(26, 26, 26);
233 | }
234 | }
--------------------------------------------------------------------------------
/src/components/Header/Header.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | import './Header.css';
5 | import HeaderLogo from './headerLogo.png';
6 | import ShoppingCartRoundedIcon from '@material-ui/icons/ShoppingCartRounded';
7 | import MenuIcon from '@material-ui/icons/Menu';
8 | import CloseIcon from '@material-ui/icons/Close';
9 | import { useStateValue } from '../StateProvider/StateProvider';
10 | import { auth } from '../../firebase';
11 |
12 | const Header = () => {
13 |
14 | const [navBar, setNavBar] = useState(false);
15 |
16 | const [{ cart, user }] = useStateValue();
17 |
18 | const showNavBar = () => setNavBar(!navBar);
19 |
20 | const onLogin = () => {
21 | if(user) {
22 | auth.signOut();
23 | }
24 | }
25 |
26 | return (
27 | <>
28 |
38 |
43 |
29 | 
*/}
34 | 
35 |
36 |
73 |
74 |
30 |
32 |
33 | {/*
35 |
36 |
37 |
38 | Home
39 |
40 | {/*
41 | Kids
42 | */}
43 |
44 | Men's Footwear
45 |
46 |
47 | Women's Footwear
48 |
49 |
50 |
51 |
52 |
72 |
53 | Hello, {user?.email}
54 | {user ? 'Sign Out' : 'Log In/Sign Up'}
55 |
56 |
57 | {/*
58 |
59 | Hello, abcabc@gmail.com
60 | Log In/Sign Up
61 |
62 | */}
63 | {/*
64 | Log In/Sign Up
65 | */}
66 |
67 |
75 |
102 |
103 |
104 | );
105 | }
106 |
107 | export default Header;
--------------------------------------------------------------------------------
/src/components/Header/headerLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/Header/headerLogo.png
--------------------------------------------------------------------------------
/src/components/Header/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/Header/logo.jpg
--------------------------------------------------------------------------------
/src/components/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home {
2 | max-width: 100vw;
3 | height: 100%;
4 | /* background: linear-gradient(to right, black, rgb(60, 102, 102)); */
5 | background: linear-gradient(to right, rgb(155, 1, 1), rgb(240, 12, 12));
6 | }
--------------------------------------------------------------------------------
/src/components/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './Home.css';
4 | import SlideView from './SlideView/SlideView';
5 |
6 | const Home = () => {
7 | return (
8 |
76 |
78 |
79 |
80 |
101 |
81 | Hello, {user?.email}
82 | {user ? 'Sign Out' : 'Log In/Sign Up'}
83 |
84 |
85 |
86 |
87 | Home
88 |
89 |
90 |
91 |
92 | Men's Footwear
93 |
94 |
95 |
96 |
97 | Women's Footwear
98 |
99 |
100 |
9 |
12 | );
13 | }
14 |
15 | export default Home;
--------------------------------------------------------------------------------
/src/components/Home/SlideView/SlideView.css:
--------------------------------------------------------------------------------
1 | .slideView__wrapper {
2 | max-width: 90%;
3 | height: 100%;
4 | margin-left: auto;
5 | margin-right: auto;
6 |
7 | /* background-color: red; */
8 | }
9 |
10 | .slideView__page {
11 | max-width: 100%;
12 | margin-top: 50px;
13 | color: black;
14 | background: linear-gradient(to right, rgb(216, 216, 216), white);
15 | border-radius: 100px;
16 | margin-bottom: 60px;
17 | }
18 |
19 | @media screen and (max-width: 400px) {
20 | .slideView__wrapper {
21 | max-width: 80%;
22 | }
23 |
24 | .slideView__page {
25 | border-radius: 15px;
26 | margin-bottom: 30px;
27 | }
28 | }
29 |
30 | @media screen and (min-width: 400px) and (max-width: 630px) {
31 | .slideView__wrapper {
32 | max-width: 80%;
33 | }
34 |
35 | .slideView__page {
36 | border-radius: 20px;
37 | margin-bottom: 30px;
38 | }
39 | }
40 |
41 | @media screen and (min-width: 630px) and (max-width: 900px) {
42 | .slideView__wrapper {
43 | max-width: 80%;
44 | }
45 |
46 | .slideView__page {
47 | border-radius: 40px;
48 | margin-bottom: 30px;
49 | }
50 | }
--------------------------------------------------------------------------------
/src/components/Home/SlideView/SlideView.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import "slick-carousel/slick/slick.css";
4 | import "slick-carousel/slick/slick-theme.css";
5 |
6 | import './SlideView.css';
7 | import Slider from 'react-slick';
8 | import Slides from './Slides/Slides';
9 | import AirJordan from './Slides/airJordan.jpg';
10 | import NikeBlazers from './Slides/nikeBlazers.jpg';
11 | import AirMax from './Slides/airMax.jpg';
12 |
13 | const SlideView = () => {
14 | return (
15 |
16 |
23 |
24 |
53 | .
54 |
55 | );
56 | }
57 |
58 | export default SlideView;
--------------------------------------------------------------------------------
/src/components/Home/SlideView/Slides/Slides.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | import './Slides.css';
5 | import AirJordan from './airJordan.jpg';
6 | import NikeBlazers from './nikeBlazers.jpg';
7 | import AirMax from './airMax.jpg';
8 |
9 | import LoyaltyIcon from '@material-ui/icons/Loyalty';
10 |
11 | const Slides = ({ image, alternate, shoes, off, pathTo }) => {
12 | return (
13 | <>
14 |
25 |
33 |
34 |
42 |
43 |
51 |
52 |
15 | Clearance Sale
16 |
18 |
19 |
20 |
31 |
32 | );
33 | }
34 |
35 | export default Slides;
--------------------------------------------------------------------------------
/src/components/Home/SlideView/Slides/airJordan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/Home/SlideView/Slides/airJordan.jpg
--------------------------------------------------------------------------------
/src/components/Home/SlideView/Slides/airMax.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/Home/SlideView/Slides/airMax.jpg
--------------------------------------------------------------------------------
/src/components/Home/SlideView/Slides/nikeBlazers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/Home/SlideView/Slides/nikeBlazers.jpg
--------------------------------------------------------------------------------
/src/components/Login/Login.css:
--------------------------------------------------------------------------------
1 | .login {
2 | background-image: url('./wallpaper.jpg');
3 | max-width: 100vw;
4 | height: 100%;
5 | background-size: cover;
6 | background-repeat: no-repeat;
7 | filter: brightness(70%);
8 | color: white;
9 | }
10 |
11 | .login__page {
12 | box-shadow: 15px 15px 15px black, 5px 5px 5px black;
13 | /* border: 1px solid rgb(68, 68, 68); */
14 | width: 400px;
15 | height: 550px;
16 | margin-left: auto;
17 | margin-right: auto;
18 | margin-top: 20px;
19 | margin-bottom: 40px;
20 | display: flex;
21 | flex-direction: column;
22 | align-items: center;
23 | }
24 |
25 | .logo {
26 | width: 100%;
27 | /* background-color: #fff; */
28 | display: flex;
29 | flex-direction: column;
30 | align-items: center;
31 | }
32 |
33 | .login__logo {
34 | background-color: #fff;
35 | margin-top: 10px;
36 | width: 100px;
37 | height: 100px;
38 | border-radius: 50%;
39 | }
40 |
41 | .login__head1 {
42 | width: 100%;
43 | text-align: center;
44 | text-transform: uppercase;
45 | font-size: 17px;
46 | font-weight: 500;
47 | margin-top: 13px;
48 | margin-bottom: 9px;
49 | }
50 |
51 | .login__page > form {
52 | /* background-color: red; */
53 | width: 100%;
54 | margin-top: 14px;
55 | display: flex;
56 | flex-direction: column;
57 | align-items: center;
58 | }
59 |
60 | .login__email , .login__password {
61 | font-size: 16px;
62 | font-weight: 500;
63 | margin-bottom: 6px;
64 | }
65 |
66 | .login__input {
67 | margin-bottom: 15px;
68 | width: 250px;
69 | height: 30px;
70 | outline: none;
71 | border: none;
72 | font-size: 15px;
73 | border-radius: 18px;
74 | text-align: center;
75 | }
76 |
77 | .login__button {
78 | background: linear-gradient(to right, rgb(241, 241, 241), rgb(252, 125, 146));
79 | color: black;
80 | font-size: 15px;
81 | font-weight: 500;
82 | width: 180px;
83 | margin-top: 10px;
84 | /* margin-bottom: 0px; */
85 | cursor: pointer;
86 | transition: all 0.5s ease;
87 | }
88 |
89 | .login__button:hover {
90 | background: linear-gradient(to left, rgb(241, 241, 241), rgb(240, 122, 141));
91 | }
92 |
93 | .login__head2 {
94 | /* margin-top: 2px; */
95 | width: 85%;
96 | margin-left: auto;
97 | margin-right: auto;
98 | text-align: center;
99 | font-size: 13px;
100 | font-weight: 400;
101 | color: rgb(216, 214, 214);
102 | }
103 |
104 | .login__head3 {
105 | width: 85%;
106 | margin-left: auto;
107 | margin-right: auto;
108 | text-align: center;
109 | font-size: 13px;
110 | font-weight: 400;
111 | color: rgb(216, 214, 214);
112 | }
113 |
114 | .underlineHead3 {
115 | text-decoration: underline;
116 | cursor: pointer;
117 | }
118 |
119 | @media screen and (max-width: 500px) {
120 | .login {
121 | background-image: url(./wallpaper2.jpg);
122 | }
123 |
124 | .login__page {
125 | box-shadow: 15px 15px 15px rgb(59, 59, 59), 5px 5px 5px rgb(54, 54, 54);
126 | width: 240px;
127 | height: 480px;
128 | margin-top: 0;
129 | margin-top: 5px;
130 | }
131 |
132 | .login__logo {
133 | width: 70px;
134 | height: 70px;
135 | }
136 |
137 | .login__head1 {
138 | font-size: 14px;
139 | margin-top: 10px;
140 | margin-bottom: 7px;
141 | }
142 |
143 | .login__email , .login__password {
144 | font-size: 13px;
145 | margin-bottom: 5px;
146 | }
147 |
148 | .login__input {
149 | margin-bottom: 11px;
150 | width: 220px;
151 | height: 25px;
152 | font-size: 13px;
153 | border-radius: 14px;
154 | }
155 |
156 | .login__button {
157 | font-size: 13px;
158 | width: 150px;
159 | margin-top: 8px;
160 | margin-bottom: 0;
161 | margin-bottom: 10px;
162 | }
163 |
164 | .login__head2 {
165 | width: 85%;
166 | font-size: 11px;
167 | }
168 |
169 | .login__head3 {
170 | width: 85%;
171 | font-size: 11px;
172 | margin-top: 0px;
173 | }
174 | }
--------------------------------------------------------------------------------
/src/components/Login/Login.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import './Login.css';
4 | import Wallpaper from './wallpaper.jpg';
5 | import { auth } from '../../firebase';
6 | import { useHistory } from 'react-router-dom';
7 |
8 | const Login = () => {
9 |
10 | const history = useHistory();
11 | const [email, setEmail] = useState('');
12 | const [password, setPassword] = useState('');
13 |
14 | const loginAccount = (event) => {
15 | event.preventDefault();
16 | auth.signInWithEmailAndPassword(email, password)
17 | .then((auth) => {
18 | history.push('/');
19 | })
20 | .catch(e => alert(e.message));
21 | };
22 |
23 | const createAccount = (event) => {
24 | event.preventDefault();
25 | auth.createUserWithEmailAndPassword(email, password)
26 | .then((auth) => {
27 | history.push('/');
28 | })
29 | .catch(e => alert(e.message));
30 | };
31 |
32 | return (
33 |
21 | Exclusive {shoes} for Sale
22 |
30 |
23 | Upto
24 | {off}% off
25 |
26 |
27 |
28 |
29 |
34 | .
35 |
67 | );
68 | }
69 |
70 | export default Login;
--------------------------------------------------------------------------------
/src/components/Login/wallpaper.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/Login/wallpaper.jpg
--------------------------------------------------------------------------------
/src/components/Login/wallpaper2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SMQuadri/Reactjs-ECommerce-Web-App/f09130bc10bf2e7bfe8f7850384177713eb223ce/src/components/Login/wallpaper2.jpg
--------------------------------------------------------------------------------
/src/components/StateProvider/StateProvider.js:
--------------------------------------------------------------------------------
1 | // We need this to track the cart
2 | import React, { createContext, useContext, useReducer } from 'react';
3 |
4 | // Setting up the Data Layer
5 | export const StateContext = createContext();
6 |
7 | // Provider
8 | export const StateProvider = ({ reducer, initialState, children }) => (
9 |
36 |
65 | .
66 |
37 |
38 |
39 | Get News and Offers from Nike
40 |
64 |
38 |