Adding new functionality

src/pages/About.jsx

@@ -10,8 +10,8 @@ function About() {
         style={{ backgroundImage: `url(${Shop})` }}
       ></div>
       <div className="aboutBottom">
-        <h1>About us</h1>
-        <p>
+        <h1 className="aboutTitle">About us</h1>
+        <p className="paragraphTitle">
           {" "}
           This virtual coffee shop was founded in 1997. It began with 3 friends
           who met each other in Spain. and their own mixtures of coffee. Now, 33

src/pages/Home.jsx

@@ -7,8 +7,8 @@ function Home() {
   return (
     <div className="home" style={{ backgroundImage: `url(${BannerImage})` }}>
       <div className="headerContainer">
-        <h1>My coffee shop elections</h1>
-        <p>Taste a real coffee like 1800s</p>
+        <h1 className="titleHome">My coffee shop elections</h1>
+        <p className="paragraphHome">Taste a real coffee like 1800s</p>
         <Link to="/menu">
           <button>Order now</button>
         </Link>

src/pages/Products.jsx

@@ -1,11 +1,12 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
+import "../styles/Products.css";
 
 function Products() {
   const [posts, setPosts] = useState([]);
 
   const fetchProducts = async () => {
-    const res = await axios.get("https://jsonplaceholder.typicode.com/photos");
+    const res = await axios.get("https://api.sampleapis.com/coffee/hot");
     console.log(res.data);
     setPosts(res.data);
     return res;
@@ -17,14 +18,22 @@ function Products() {
 
   return (
     <>
-      <div>Products</div>
+      <div className="menu">
+        <h1 className="menuTitle">Products</h1>
+      </div>
       {/* <button onClick={fetchProducts}>Fetch Products</button> */}
       <ul>
         {posts.slice(0, 10).map((post) => (
           <li key={post.id}>
-            <h3>{post.title}</h3>
-            <p>{post.body}</p>
-            <img src={post.url} alt={post.title} width={"120px"} />
+            <h3 className="apiTitle">{post.title}</h3>
+            <p className="apiParagraph">{post.description}</p>
+            <img
+              src={post.image}
+              className="apiImage"
+              alt={post.title}
+              width={"140px"}
+            />
+            <span className="apiSpan">{post.ingredients}</span>
           </li>
         ))}
       </ul>

src/pages/Recipes.jsx

@@ -1,28 +1,22 @@
+// import React, { useState } from "react";
 import React, { useState } from "react";
 import "../styles/Recipes.css";
 
 function Recipes() {
-  const [randomHouse, setRandomHouse] = useState(null);
+  const [randomRecipe, setRandomRecipe] = useState(null);
 
-  const fetchRandomHouse = async () => {
+  const fetchRandomRecipe = async () => {
     try {
       const response = await fetch(
-        `https://anapioficeandfire.com/api/houses/378`
+        `https://api.sampleapis.com/recipes/recipes`
       );
       if (!response.ok) {
         throw new Error("Network response was not ok today");
       }
       const data = await response.json();
-      // const houses = Object.keys(data.message);
-      // const randomIndex = Math.floor(Math.random() * houses.length);
-      // const randomHouses = houses[randomIndex];
-      const randomHouse = {
-        name: randomHouse,
-        region: `${randomHouse} region.`,
-        words: randomHouse,
-      };
-
-      setRandomHouse(randomHouse);
+      const randomIndex = Math.floor(Math.random() * data.length);
+      const randomDish = data[randomIndex];
+      setRandomRecipe(randomDish);
     } catch (error) {
       console.error("Error fetching recipes:", error);
     }
@@ -32,16 +26,21 @@ function Recipes() {
     <div className="recipes">
       <h1 className="recipeTitle">Enjoy our recipes</h1>
       <p>
-        {""}
         For a small meeting with your friends, or a celebration, you have a tons
         of tasty recipes you can use, only assure yourself to click in this
-        button :
+        button:
       </p>
-      <button onClick={fetchRandomHouse}>Open me</button>
-      {randomHouse && (
+      <button onClick={fetchRandomRecipe}>Open me</button>
+      {randomRecipe && (
         <div className="randomRecipe">
-          <h2>{randomHouse.name}</h2>
-          <p>{randomHouse.region}</p>
+          <h2>{randomRecipe.title}</h2>
+          <p>{randomRecipe.cuisine}</p>
+          <span>{randomRecipe.mainIngredient}</span>
+          <img
+            src={randomRecipe.photoUrl}
+            width={"120px"}
+            alt={randomRecipe.title}
+          />
         </div>
       )}
     </div>

src/styles/About.css

@@ -21,6 +21,8 @@
 }
 .aboutBottom p {
 width: 1200px;
+line-height: 30px;
+font-size: 18px;
 }
 .about .aboutBottom h1 {
     font-weight: 400;
@@ -30,4 +32,15 @@ width: 1200px;
     display: flex;
     justify-content: center;
     transform: translateY(-40px);
+    margin-bottom: 20px;
+}
+h1.aboutTitle{
+margin-top: 10px;
+font-family: cursive;
+}
+.aboutTop{
+    margin-bottom: 20px;
+}
+.paragraphTitle {
+    margin-top: 24px;
 }

src/styles/Home.css

@@ -14,20 +14,22 @@
     width: auto;
     margin-left: 50px;
 }
-.headerContainer h1 {
+ h1.titleHome {
     justify-content: center;
     align-items: center;
     font-size: 90px;
     height: 60px;
     font-weight: 50;
     color: black;
+    margin-bottom: 45px;
 }
 
-.headerContainer p {
+ p.paragraphHome {
     padding: 0;
     font-size: 40px;
     font-weight: lighter;
     color: black;
+    margin-bottom: 20px;
 }
 
 .headerContainer button {

src/styles/Menu.css

@@ -18,6 +18,10 @@
     grid-template-columns: 1fr 1fr 1fr;
     place-items: center;
   }
+
+  div.menuList a {
+    text-decoration: none;
+  }
 
   /* MENU ITEM STYLING */
 
@@ -27,7 +31,11 @@
     height: 350px;
     margin: 20px;
     box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+    text-decoration: none;
+    color: black;
+
   }
+
   .menuItem:hover {
     box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5);
     transition: 0.3s ease-in;
@@ -43,11 +51,14 @@
     background-repeat: no-repeat;
     background-size: cover;
   }
-  
+
   .menuItem h1,
   .menuItem p {
     margin-left: 20px;
+    margin-bottom: 20px;
+    margin-top: 20px;
   }
+
 
   .menuItem span {
     margin-left: 10px;

src/styles/Products.css

@@ -0,0 +1,30 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+ h3.apiTitle{
+    font-family: cursive;
+    font-size: 28px;
+    margin-left: 50px;
+    margin-bottom: 10px;
+}
+.apiParagraph {
+    margin-left: 50px;
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+.apiImage {
+    display: flex;
+    justify-content: center;
+    margin-left: 50%;
+    margin-top: 2%;
+    margin-bottom: 1%;
+    border-radius: 40px 10px;
+    border: none;
+}
+span.apiSpan {
+margin-left: 50%;
+font-style: italic;
+margin-bottom: 10px;
+}