From fb925b12166bbb341d48340c1d757d709cdf374d Mon Sep 17 00:00:00 2001
From: anushree <aushreebondia@gmail.com>
Date: Mon, 22 Jan 2024 20:59:17 +0530
Subject: [PATCH] added the footer section

---
 src/App.css              |  67 +++++++++++++++
 src/App.js               |   2 +
 src/components/Footer.js |  48 +++++++++++
 src/pages/Home.js        | 177 ++++++++++++++++++++-------------------
 src/pages/Profile.js     |  54 ++++++------
 5 files changed, 237 insertions(+), 111 deletions(-)
 create mode 100644 src/components/Footer.js

diff --git a/src/App.css b/src/App.css
index be1ddf2..509d838 100644
--- a/src/App.css
+++ b/src/App.css
@@ -184,4 +184,71 @@ body {
   background-color: white;
   color: black !important; 
 }
+.Footer {
+  background-color: #4B3100;
+  color: white;
+  border-color: #4B3100;
+  padding: 2rem 0;
+  margin-top: 2rem;
+}
+.ft-1 h3 {
+  font-weight: 700;
+  font-family: cursive;
+  letter-spacing: 2px;
+  padding: 0.5rem 0;
+}
+
+.ft-1 span {
+  color: #f60838;
+}
+
+.ft-1 p {
+  padding: 0rem 5rem 0.8rem 0;
+  font-weight: 500;
+}
+
+.footer-icons i {
+  padding: 0.4rem 0.5rem;
+  background: #e1e1e1;
+  color: #f60838;
+  margin: 0 0.5rem;
+  border-radius: 50%;
+}
+
+.footer-icons i:hover {
+  background: #f60838;
+  color: #fff;
+  transition: 0.6s;
+  cursor: pointer;
+}
+
+.Footer h5 {
+  color: #f60838;
+}
+
+.ft-2 ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.ft-2 ul li {
+  padding: 0.35rem 0;
+  font-weight: 500;
+}
+
+.ft-2 ul a {
+  text-decoration: none;
+  color: #000;
+  font-size: 1.06rem;
+}
+
+.ft-3 p {
+  font-weight: 500;
+  padding: 0.1rem 0;
+  font-size: 1.06rem;
+}
+
+.ft-3 i {
+  padding-right: 0.5rem;
+}
 
diff --git a/src/App.js b/src/App.js
index e5f88c4..53333c1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Profile from "./pages/Profile";
 import Home from "./pages/Home";
 import ContactUs from "./pages/ContactUs";
+import Footer from "./components/Footer";
 
 function App() {
   return (
@@ -14,6 +15,7 @@ function App() {
           <Route exact path="/tasty-tips" element={<Home />} />
           <Route exact path="/contactus" element={<ContactUs />} />
         </Routes>
+        <Footer />
       </div>
     </BrowserRouter>
   );
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..b9b0100
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,48 @@
+import React from 'react';
+
+const Footer = () => {
+    return (
+        <>
+            <div className="Footer">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-md-6 col-lg-5 col-12 ft-1">
+                            <h3><span>TASTY</span>TIPS</h3>
+                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum ea quo ex ullam laboriosam magni totam, facere eos iure voluptate.</p>
+                            <div className="footer-icons">
+                                <i className="fab fa-facebook"></i>
+                                <i className="fab fa-twitter"></i>
+                                <i className="fab fa-instagram"></i>
+                                <i className="fab fa-linkedin-in"></i>
+                            </div>
+                        </div>
+                        <div className="col-md-6 col-lg-3 col-12 ft-2">
+                            <h5>Quick Links</h5>
+                            <ul>
+                                <li className="nav-item">
+                                    <a className="" href="/">About Us</a>
+                                </li>
+                                
+                                <li className="nav-item">
+                                    <a className="" href="/contactus">Contact Us</a>
+                                </li>
+                                <li className="nav-item">
+                                    <a className="" href="/">Services</a>
+                                </li>
+                                
+                            </ul>
+                        </div>
+                        <div className="col-md-6 col-lg-4 col-12 ft-3">
+                            <h5>Quick Links</h5>
+                            <p><i className="fas fa-phone-volume"></i> +92 3121324083</p>
+                            <p><i className="fas fa-envelope"></i> tastytips@gmail.com</p>
+                            <p><i className="fas fa-paper-plane"></i> Delhi, India.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Footer;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 60ac7b9..889c172 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import Recipe from "../components/Recipe";
 import Navbar from "../components/Navbar";
+import Nav from "react-bootstrap/Nav";
 import mainLogo from "../components/icon.png";
 import FilterModal from "../components/FilterModal";
 import Review from "../components/Review/Review";
@@ -37,19 +38,18 @@ export default function Home() {
           }
         })
         .join("&");
-  
+
       apiUrl = `${apiUrl}&${queryString}`;
     }
 
     //console.log("apiUrl: ", apiUrl);
-  
+
     fetch(apiUrl)
       .then((response) => response.json())
       .then((data) => {
         setRecipes(data.hits);
       });
   };
-  
 
   useEffect(() => {
     getRecipes();
@@ -67,7 +67,6 @@ export default function Home() {
 
   const [myStyle, setStyle] = useState({
     color: "rgb(242, 198, 140)",
-    
   });
   const handleMouseEnter = () => {
     setStyle({
@@ -104,7 +103,7 @@ export default function Home() {
       ? "radial-gradient(black,black,black)"
       : "linear-gradient(to right, #aa8b56 0%, #f0ebce 100%)";
   };
-  
+
   const openFilterModal = () => {
     setFilterModalOpen(true);
   };
@@ -117,86 +116,94 @@ export default function Home() {
     setSelectedFilters(filters);
     setFilterModalOpen(false);
   };
-    
 
-    return (
-      <>
-          <div className={`App ${mode === "light" ? "light-mode" : "dark-mode"}`}>
+  return (
+    <>
+      <div className={`App ${mode === "light" ? "light-mode" : "dark-mode"}`}>
         <Navbar />
-          <img
-            alt=""
-            src={mainLogo}
-            width="100"
-            height="100"
-            className="logo"
-            text-align="center"
-          />
-          <h1 className="heading" style={myStyle} onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}>
-            Tasty Tips
-          </h1>
-          <form onSubmit={getSearch} className="search-form">
-            <input
-              className="search-bar"
-              type="text"
-              value={search}
-              onChange={handleSearch}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  setSearch(e.target.value);
-                  // console.log("search: ", e.target.value)
-                }
-              }}
-            ></input>
-            <button className="search-btn" type="submit">
-              Search
-            </button>
-            <button className="filter-btn" onClick={openFilterModal}>
-               Filter
-            </button>
-            </form>
-            
-            <FilterModal isOpen={filterModalOpen} onClose={closeFilterModal} onFilterApply={applyFilters} />
-
-          <div class="form-check form-switch">
-            <input
-              className="form-check-input ms-5"
-              type="checkbox"
-              role="switch"
-              id="flexSwitchCheckDefault"
-              onClick={toggleMode}
-            ></input>
-          </div>
-          <div className="container">
-            {recipes.slice(0, visible).map((r) => (
-              <Recipe
-                key={r.recipe.url}
-                title={r.recipe.label}
-                calories={r.recipe.calories}
-                img={r.recipe.images.REGULAR.url}
-                url={r.recipe.url}
-                ingredients={r.recipe.ingredients}
-                diet={r.recipe.dietLabels}
-                health={r.recipe.healthLabels}
-                cuisineType={r.recipe.cuisineType}
-                mealType={r.recipe.mealType}
-                dishType={r.recipe.dishType}
-                time={r.recipe.totalTime}
-                tags={r.recipe.tags}
-                myStyle={myStyle}
-                cardStyle={cardStyle}
-              />
-            ))}
-          </div>
-          <div className="button-container">
-            <button className="loadMoreButton" onClick={showMoreItems}>
-              Load More Recipes
-            </button>
-            </div>
-          </div>
-          <div className="rev">
-            <Review></Review>
-          </div>
-        </>
-    )
+        <img
+          alt=""
+          src={mainLogo}
+          width="100"
+          height="100"
+          className="logo"
+          text-align="center"
+        />
+        <h1
+          className="heading"
+          style={myStyle}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          Tasty Tips
+        </h1>
+        <form onSubmit={getSearch} className="search-form">
+          <input
+            className="search-bar"
+            type="text"
+            value={search}
+            onChange={handleSearch}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                setSearch(e.target.value);
+                // console.log("search: ", e.target.value)
+              }
+            }}
+          ></input>
+          <button className="search-btn" type="submit">
+            Search
+          </button>
+          <button className="filter-btn" onClick={openFilterModal}>
+            Filter
+          </button>
+        </form>
+
+        <FilterModal
+          isOpen={filterModalOpen}
+          onClose={closeFilterModal}
+          onFilterApply={applyFilters}
+        />
+
+        <div class="form-check form-switch">
+          <input
+            className="form-check-input ms-5"
+            type="checkbox"
+            role="switch"
+            id="flexSwitchCheckDefault"
+            onClick={toggleMode}
+          ></input>
+        </div>
+        <div className="container">
+          {recipes.slice(0, visible).map((r) => (
+            <Recipe
+              key={r.recipe.url}
+              title={r.recipe.label}
+              calories={r.recipe.calories}
+              img={r.recipe.images.REGULAR.url}
+              url={r.recipe.url}
+              ingredients={r.recipe.ingredients}
+              diet={r.recipe.dietLabels}
+              health={r.recipe.healthLabels}
+              cuisineType={r.recipe.cuisineType}
+              mealType={r.recipe.mealType}
+              dishType={r.recipe.dishType}
+              time={r.recipe.totalTime}
+              tags={r.recipe.tags}
+              myStyle={myStyle}
+              cardStyle={cardStyle}
+            />
+          ))}
+        </div>
+        <div className="button-container">
+          <button className="loadMoreButton" onClick={showMoreItems}>
+            Load More Recipes
+          </button>
+        </div>
+      </div>
+      <div className="rev">
+        <Review></Review>
+      </div>
+      
+    </>
+  );
 }
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index fcd654b..4b2a238 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -1,6 +1,6 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth0 } from '@auth0/auth0-react';
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth0 } from "@auth0/auth0-react";
 import Navbar from "../components/Navbar";
 import mainLogo from "../components/icon.png";
 
@@ -17,46 +17,48 @@ const ProfilePage = ({ onClose }) => {
       onClose();
     } else {
       // Redirect to the home page if onClose is not provided
-      navigate('/');
+      navigate("/");
     }
   };
 
   return (
     <>
-    <Navbar />
-          <img
-            alt=""
-            src={mainLogo}
-            width="100"
-            height="100"
-            className="logo"
-            text-align="center"
-      />
-
-    <div className="container mt-5">
-    <div className="profile-container text-center">
-      <h2>User Profile</h2>
+      <Navbar />
       <img
-        src={user.picture}
-        alt={user.name}
+        alt=""
+        src={mainLogo}
         width="100"
         height="100"
-        className="rounded-circle"
+        className="logo"
+        text-align="center"
       />
-      <p className="mt-3">Name: {user.name}</p>
+
+      <div className="container mt-5">
+        <div className="profile-container text-center">
+          <h2>User Profile</h2>
+          <img
+            src={user.picture}
+            alt={user.name}
+            width="100"
+            height="100"
+            className="rounded-circle"
+          />
+          <p className="mt-3">Name: {user.name}</p>
           <p>Email: {user.email}</p>
-      <div className="d-flex justify-content-center mt-4">
+          <div className="d-flex justify-content-center mt-4">
             <button className="btn btn-secondary me-3" onClick={handleClose}>
               Back
             </button>
             <button className="btn btn-danger" onClick={handleLogout}>
               Logout
             </button>
+          </div>
+        </div>
       </div>
-      </div>
-      </div>
-      </>
+
+      
+    </>
   );
 };
 
-export default ProfilePage;
\ No newline at end of file
+export default ProfilePage;