Merge conflicts.

package.json

@@ -6,8 +6,11 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "lodash-es": "^4.17.11",
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
+    "react-credit-cards": "^0.7.0",
     "react-dom": "^16.8.6",
+    "react-payment": "^0.1.8",
     "react-router-dom": "^5.0.0",
     "react-scripts": "3.0.0",
     "react-spring": "^8.0.20",

src/components/AlRecycling/AlRecycling.js

@@ -16,26 +16,22 @@ const tutorialSteps = [
   {
     label:
       'You place the can into the blue bin to be recycled. It gets shipped to a materials recovery facility where they are cleaned, sorted into different metal streams and later compressed into bales.',
-    imgPath:
-      'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60'
+    imgPath: '../recyclebackground1.jpg'
   },
   {
     label:
       'The aluminum blocks bales are transported to a processing plant where they are shredded into tiny pieces and taken by the conveyor system into a specialized decoater.',
-    imgPath:
-      'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80'
+    imgPath: '../recyclebackground1.jpg'
   },
   {
     label:
       'After this, they are taken to a holding furnace where they are melted down into ingots, lifted by an overhead careen, and dispatched to the rolling mill. The ingots are then rolled out making thin sheets of aluminum',
-    imgPath:
-      'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60'
+    imgPath: '../recyclebackground1.jpg'
   },
   {
     label:
       'They are then repurposed into new Aluminum products, saving 90-95% of the energy used to make a new one!',
-    imgPath:
-      'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60'
+    imgPath: '../recyclebackground1.jpg'
   }
 ];
 
@@ -88,6 +84,18 @@ class TextMobileStepper extends React.Component {
           ))}
         </SwipeableViews>
 
+        {activeStep === 3 ? (
+          <div className={classes.buttonContainer}>
+            <Button
+              component={Link}
+              to="/choose-litter"
+              className={classes.buttonEnd}
+            >
+              Back to Litter
+            </Button>
+          </div>
+        ) : null}
+
         <MobileStepper
           variant="progress"
           color="secondary"
@@ -126,18 +134,6 @@ class TextMobileStepper extends React.Component {
             </Button>
           }
         />
-
-        {activeStep === 3 ? (
-          <div className={classes.buttonContainer}>
-            <Button
-              component={Link}
-              to="/choose-litter"
-              className={classes.buttonEnd}
-            >
-              Back to Litter
-            </Button>
-          </div>
-        ) : null}
       </div>
     );
   }