Merge pull request #11 from hightechu/supportUs

support us page

src/App.js

@@ -9,6 +9,7 @@ import Logo from './components/Logo';
 import TestComponent from './components/TestComponent';
 import Footer from './components/Footer';
 import FoodLabels from "./components/FoodLabels";
+import SupportUs from "./components/SupportUs";
 
 // function must have the same name as the file, cAsE sEnSiTiVe
 function App() {

src/components/About.js

@@ -26,7 +26,7 @@ import throwing from '../images/throwfood.jpg';
             </div>
             </div>
             <div class="carousel-item active">
-            <img src={throwing} class="d-block w-75 imgsize" alt=" starve"/>
+            <img src={throwing} class="d-block w-75 imgsize" alt="children"/>
             <div class="carousel-caption d-none d-md-block">
               <h5 class="display-4 text-white text-center">Did you know</h5>
               <p class="psizes">Despite the outrageous amount of food waste, over 800 million people are undernourished. We have enough food to feed everyone, but we cannot distribute it equally.</p>

src/components/Navigation.js

@@ -20,7 +20,7 @@ const Navigation = () => {
                         <a className="nav-link" href="/about">Importance</a>
                     </li>
                     <li className="nav-item">
-                        <a className="nav-link" href="/">Support us</a>
+                        <a className="nav-link" href="/SupportUs">Support us</a>
                     </li>
 
 

src/components/SupportUs.js

@@ -0,0 +1,19 @@
+import React, {useState} from 'react';
+import qrCode from '../images/donate.png';
+
+const SupportUs = () => {
+
+    return (
+      <div className="container-fluid bgcolor">
+        <h1>Support us!</h1>
+        <h2 className="info">To ensure food waste awareness for the future generation.</h2>
+        <a href="/" className='donatelink'>Donate Now</a>
+        <br></br>        <br></br>        <br></br>
+        <p>Or scan this QR Code: </p>
+        <img src={qrCode} alt=" qrcode" className="qrbox"/>
+        <h2 className="info">Every dollar will help develop the website to be more interactive and engaging.</h2><br></br>
+      </div>
+      )
+    }
+
+export default SupportUs;

src/index.css

@@ -213,6 +213,25 @@ code {
   border: 3px solid white;
  }
 
+ .info{
+  color: rgb(202, 104, 0)
+ }
+
+ .bgcolor{
+  background-color: beige;
+ }
+
+ .qrbox{
+  width: 230px;
+  margin-bottom: 30px;
+ }
+
+ .donatelink{
+  font-size: 50px;
+  font-weight: bold;
+  color: rgb(228, 17, 123);
+  background-color: rgb(255, 255, 139);
+ }
  .milksize{
   width: 100px;
   background: 'transparent'
@@ -273,4 +292,3 @@ code {
 .dope{
   font-size: 21px;
 }
-

src/index.js

@@ -20,6 +20,7 @@ import App from './App';
 import AddDataSample from './components/AddDataSample';
 import TitleScreen from './components/TitleScreen';
 import FoodLabels from './components/FoodLabels';
+import SupportUs from './components/SupportUs';
 
 import Navigation from "./components/Navigation";
 import GameOverScreen from 'components/GameOverScreen';
@@ -47,6 +48,9 @@ root.render(
             <Route path='/adddatasample' element={<AddDataSample/>}/>
             <Route path='/TitleScreen' element={<TitleScreen/>}/>
             <Route path='/FoodLabels' element={<FoodLabels/>}/>
+
+            <Route path='/SupportUs' element={<SupportUs/>}/>
+
             <Route path='/gamenav' element={<GameNav/>}/>
             <Route path='/DndGameInside' element={<DndGameInside root={root} />}/>
         </Routes>