it is unbroken

src/components/App.jsx

@@ -8,30 +8,34 @@ import CImagesAll from "./CustomerImageCmpnt/CustomerImagesAll";
 import Appples from "./RatingSummary/Appples";
 import PhotoGallery from "./PhotoGallery/PhotoGallery";
 import TopBar from "./TopBar/TopBar";
+import BlueSecondTopLine from "./SecondTopLine/BlueSecondTopline";
+import Footer from "./Footer/Footer";
 
 // import "../Css/App.css";
 
 class App extends Component {
-	render() {
-		return (
-			<div className="app">
-				<div>
-					<TopBar />
-				</div>
+  render() {
+    return (
+      <div className="app">
+        <div>
+          <TopBar />
+        </div>
+        <BlueSecondTopLine />
 
-				<PhotoGallery />
-				<div id="PurchaseItemContainer_Placeholder">
-					{/*place holder: replace when ready*/}
-				</div>
-				<CustomerReviewsContainer />
-				<QAcomponent />
-				<ComparisonGrid />
-				<CImagesAll />
-				<CWBA />
-				<Appples />
-			</div>
-		);
-	}
+        <PhotoGallery />
+        <div id="PurchaseItemContainer_Placeholder">
+          {/*place holder: replace when ready*/}
+        </div>
+        <CustomerReviewsContainer />
+        <QAcomponent />
+        <ComparisonGrid />
+        <CImagesAll />
+        <CWBA />
+        <Appples />
+        <Footer />
+      </div>
+    );
+  }
 }
 
 export default App;

src/components/Footer/Bluefoot.js

@@ -0,0 +1,37 @@
+// will hold the get to know us
+// make money
+// all that stuff in blue above footer
+
+import React, { Component } from "react";
+
+export default class Bluefoot extends Component {
+  render() {
+    return (
+      <div className="bluefoot">
+        <h5 className="bluefoot">stuff here with blue ish background</h5>
+        <p className="bluefoot">
+          These are the voyages of the Starship Enterprise. Its continuing
+          mission, to explore strange new worlds, to seek out new life and new
+          civilizations, to boldly go where no one has gone before. We need to
+          neutralize the homing signal. Each unit has total environmental
+          control, gravity, temperature, atmosphere, light, in a protective
+          field. Sensors show energy readings in your area. We had a forced
+          chamber explosion in the resonator coil. Field strength has increased
+          by 3,000 percent.
+        </p>
+
+        <p className="bluefoot">
+          Shields up. I recommend we transfer power to phasers and arm the
+          photon torpedoes. Something strange on the detector circuit. The
+          weapons must have disrupted our communicators. You saw something as
+          tasty as meat, but inorganically materialized out of patterns used by
+          our transporters. Captain, the most elementary and valuable statement
+          in science, the beginning of wisdom, is 'I do not know.' All
+          transporters off.
+        </p>
+
+        <p className="bluefoot">Resistance is futile.</p>
+      </div>
+    );
+  }
+}

src/components/Footer/BottomLine.js

@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+import "./footer.css";
+
+export default class BottomLine extends Component {
+  render() {
+    return (
+      <div className="bottomline" id="foot">
+        <a href="#foot" className="bottomlinks">
+          Conditions of Use
+        </a>
+        <a href="#foot" className="bottomlinks">
+          Privacy Notice
+        </a>
+        <a href="#foot" className="bottomlinks">
+          Interest-Based Ads
+        </a>
+        <a href="#foot" className="notalink">
+          {" "}
+          &#169; 2020, Talent Path or its affiliates{" "}
+        </a>
+      </div>
+    );
+  }
+}

src/components/Footer/Footer.js

@@ -0,0 +1,20 @@
+// this is gonna be the one to rule them all
+
+import React, { Component } from "react";
+import "./footer.css";
+
+import Bluefoot from "./Bluefoot";
+import Prefoot from "./Prefoot";
+import BottomLine from "./BottomLine";
+
+export default class Footer extends Component {
+  render() {
+    return (
+      <div className="endofpage">
+        <Bluefoot />
+        <Prefoot />
+        <BottomLine />
+      </div>
+    );
+  }
+}

src/components/Footer/Prefoot.js

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+
+// will move to footer
+
+export default class Prefoot extends Component {
+  render() {
+    return (
+      <div className="prefoot">
+        <img
+          className="lowfootertable"
+          src="/images/preFoot.jpg"
+          alt="a table of Amazin features"
+        />
+      </div>
+    );
+  }
+}

src/components/Footer/footer.css

@@ -0,0 +1,44 @@
+.bottomline {
+  display: inline-flex;
+  background-color: rgb(19, 26, 34);
+  color: rgb(252, 252, 253);
+  width: 100%;
+  align-content: center;
+  text-align: center;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+}
+
+.bottomlinks {
+  text-decoration: none;
+  color: rgb(252, 252, 253);
+  padding: 10px;
+}
+
+.bottomlinks:hover {
+  text-decoration: underline white;
+}
+
+.notalink {
+  text-decoration: none;
+  color: rgb(173, 173, 175);
+  cursor: default;
+}
+
+.bluefoot {
+  background-color: rgb(35, 47, 62);
+  color: aliceblue;
+  padding: 13px;
+}
+
+.bluefoot,
+.prefoot,
+.bottomline {
+  margin: -3px;
+  max-width: 100%;
+}
+
+.lowfootertable {
+  max-width: 100%;
+}

src/components/PrimaryPage.jsx

@@ -9,63 +9,67 @@ import Appples from "./RatingSummary/Appples";
 import Grid from "@material-ui/core/Grid";
 import TopBar from "./TopBar/TopBar";
 import PhotoGallery from "./PhotoGallery/PhotoGallery";
+import BlueSecondTopLine from "./SecondTopLine/BlueSecondTopline";
+import Footer from "./Footer/Footer";
 import "./primarypage.css";
 
 class PrimaryPage extends Component {
-	render() {
-		return (
-			<div className="app">
-				<Grid>
-					<TopBar />
-					<Grid>
-						<div className="productgrid-container">
-							<div className="photogallery-grid-container">
-								<PhotoGallery />
-							</div>
-							<div className="productvariant-grid-container">
-								<Product
-									key={this.props.match.params.id}
-									params={this.props.match.params.id}
-								/>
-								<br />
-							</div>
-						</div>
-					</Grid>
-					<Grid>
-						<ComparisonGrid
-							key={this.props.match.params.id}
-							params={this.props.match.params.id}
-						/>
-					</Grid>
-					<Grid className="mainpage-grid qa-grid">
-						<QAcomponent
-							key={this.props.match.params.id}
-							params={this.props.match.params.id}
-						/>
-					</Grid>
-					<Grid
-						style={{ width: "100vw" }}
-						className="mainpage-grid customerReview-grid"
-					>
-						<CustomerReviewsContainer
-							key={this.props.match.params.id}
-							params={this.props.match.params.id}
-						/>
-					</Grid>
-					<Grid>
-						<CImagesAll />
-					</Grid>
-					<Grid>
-						<CWBA />
-					</Grid>
-					<Appples
-						key={this.props.match.params.id}
-						params={this.props.match.params.id}
-					/>
-				</Grid>
-			</div>
-		);
-	}
+  render() {
+    return (
+      <div className="app">
+        <Grid>
+          <TopBar />
+          <BlueSecondTopLine />
+          <Grid>
+            <div className="productgrid-container">
+              <div className="photogallery-grid-container">
+                <PhotoGallery />
+              </div>
+              <div className="productvariant-grid-container">
+                <Product
+                  key={this.props.match.params.id}
+                  params={this.props.match.params.id}
+                />
+                <br />
+              </div>
+            </div>
+          </Grid>
+          <Grid>
+            <ComparisonGrid
+              key={this.props.match.params.id}
+              params={this.props.match.params.id}
+            />
+          </Grid>
+          <Grid className="mainpage-grid qa-grid">
+            <QAcomponent
+              key={this.props.match.params.id}
+              params={this.props.match.params.id}
+            />
+          </Grid>
+          <Grid
+            style={{ width: "100vw" }}
+            className="mainpage-grid customerReview-grid"
+          >
+            <CustomerReviewsContainer
+              key={this.props.match.params.id}
+              params={this.props.match.params.id}
+            />
+          </Grid>
+          <Grid>
+            <CImagesAll />
+          </Grid>
+          <Grid>
+            <CWBA />
+          </Grid>
+          <Appples
+            key={this.props.match.params.id}
+            params={this.props.match.params.id}
+          />
+        </Grid>
+        <Footer />
+      </div>
+    );
+  }
 }
 
 export default PrimaryPage;

src/components/SecondTopLine/BestSellers.js

@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+
+export default class BestSellers extends Component {
+  render() {
+    return (
+      <div className="bestsellers">
+        <h4>
+          <a className="bluetoprow">Best Sellers</a>
+        </h4>
+      </div>
+    );
+  }
+}

src/components/SecondTopLine/BlueSecondTop.css

@@ -0,0 +1,23 @@
+.bluesecondtopline {
+  display:flex;
+  flex-direction: row;
+  background-color: rgb(35, 47, 62);
+  color: aliceblue;
+  width:100%;
+  height:50px;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-wrap: nowrap;
+}
+
+.bluetoprow {
+  text-decoration: none;
+  color: aliceblue;
+  border:1px solid rgb(35, 47, 62);
+  padding:5px;
+}
+
+.bluetoprow:hover{
+    border:1px solid white;
+    cursor: pointer;
+}

src/components/SecondTopLine/BlueSecondTopline.js

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import Location from "./Location";
+import BestSellers from "./BestSellers";
+import CustomerService from "./CustomerService";
+import Deals from "./Deals";
+import NewReleases from "./NewReleases";
+import Gift from "./Gift";
+import Foods from "./Foods";
+import GiftCards from "./GiftCards";
+import Shipping from "./Shipping";
+import Registry from "./Registry";
+import School from "./School";
+
+import "./BlueSecondTop.css";
+
+export default class BlueSecondTopLine extends Component {
+  render() {
+    return (
+      <div className="bluesecondtopline">
+        <Location />
+        <BestSellers />
+        <CustomerService />
+        <Deals />
+        <NewReleases />
+        <Gift />
+        <Foods />
+        <GiftCards />
+        <Shipping />
+        <Registry />
+        <School />
+      </div>
+    );
+  }
+}