adding contact page and add recipe

src/app/components/AddRecipe/AddRecipePage.css

@@ -0,0 +1,11 @@
+* {
+    box-sizing: border-box;
+    padding: 0px;
+    margin: 0px;
+    font-family: 'Ubuntu';
+  }
+
+  .main {
+    background-color: white;
+    color: black;
+  }

src/app/components/AddRecipe/AddRecipePage.js

@@ -0,0 +1,27 @@
+'use client';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+import './AddRecipePage.css';
+
+
+import { Header } from '../Header';
+import { NavBar } from '../NavBar';
+import { RecipeBox } from './RecipeBox';
+import { RecipeForm } from './RecipeForm';
+import { Footer } from '../Footer';
+
+
+
+
+export default function AddRecipePage() {
+  return (
+    <>
+      <Header />
+      <NavBar />
+      <RecipeBox />
+      <RecipeForm />
+      <Footer />
+      </>
+  );
+}

src/app/components/AddRecipe/RecipeBox.css

@@ -0,0 +1,68 @@
+.box {
+    display: row;
+    justify-content: space-around;
+    grid-column: column;
+    box-sizing: border-box;
+    vertical-align: baseline;
+    padding: 80px;
+    margin: 0 20 30px;
+    border: none;
+  }
+
+.breadcrumb{
+    padding: 20px 16px;
+    list-style: none;
+   background-color: none;
+}
+
+.breadcrumb-item{
+    display: inline;
+    font-size: 22px;
+    font-weight: 500;
+}
+
+.breadcrumb li+li:before{
+    padding: 8px;
+    color: black;
+    content: ">";
+    font-weight: bold;
+}
+
+.breadcrumb-item a{
+    color: #2e4053;
+    text-decoration: none;
+}
+
+.breadcrumb-item a:hover{
+    color: rgb(209, 31, 31);
+}
+
+.imgcontact {
+    display: flex;
+    width:98%;
+    height: 260px;
+    gap: 30%;
+    top: 200px;
+    margin: 20px;
+    border-radius: 4px;
+}
+
+
+@media only screen and (max-width: 600px) {
+    .box {
+      display: block;
+    }
+    .imgcontact {
+      display: block;
+      height: 200px;
+      width: 330px;
+      margin: 0 10%;
+    }
+    .breadcrumb {
+      display: block;
+      margin: auto;
+    }
+  }
+
+
+

src/app/components/AddRecipe/RecipeBox.js

@@ -0,0 +1,25 @@
+'use client';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+import Image from "next/image";
+import veggie from "/public/assets/veggie.jpg";
+import "./RecipeBox.css";
+
+
+export const RecipeBox = () => {
+    return (
+       <div className="box">
+       <ol className="breadcrumb">
+                 <li className="breadcrumb-item"> <a href="../page.js"> 🏠Home </a></li>
+                 <li className="breadcrumb-item"> <a href="#"> Add Recipe </a></li>
+         </ol>
+         <Image
+          className="imgcontact"
+          src={veggie}
+          alt="vegetables"
+          />
+        </div>
+
+   );
+};

src/app/components/AddRecipe/RecipeForm.css

@@ -0,0 +1,110 @@
+.row {
+    display: flex;
+}
+
+  .column {
+    flex: auto;
+    padding: 30px;
+  }
+
+  .box {
+    display: row;
+    justify-content: space-around;
+    grid-column: column;
+    box-sizing: border-box;
+    vertical-align: baseline;
+    padding: 20px;
+    margin: 0 0 30px;
+    border: none;
+}
+
+  .column {
+    text-align: left;
+    max-width: 100%;
+    height: 805px;
+    line-height: 160%;
+    font-size: 18px;
+    font-weight: 100;
+    margin: 5%;
+    background-color: #d9d9d95a;
+    border-radius: 14px;
+}
+
+  .box h1 {
+    margin: 2%;
+    font-weight: 600;
+    font-size: 33px;
+    align-items: center;
+    text-align: center;
+  }
+
+  .column h2 {
+    display: flex;
+    margin: 20px;
+    font-size: 28px;
+    align-items: center;
+    text-align: center;
+  }
+
+  * {
+    box-sizing: border-box;
+    }
+
+
+.container {
+        padding: 16px;
+        background-color: none;
+      }
+
+      input[type=text], input[type=name] {
+        width: 100%;
+        padding: 15px;
+        margin: 5px 0 22px 0;
+        display: inline-block;
+        border: none;
+        background: #D9D9D9;
+        border-radius: 4px;
+      }
+
+      input[type=text]:focus, input[type=name]:focus {
+        background-color: #edd794;
+        outline: none;
+      }
+
+      .submitbtn {
+        background-color: #24503D;
+        color: white;
+        padding: 16px 20px;
+        margin: 8px 0;
+        border: none;
+        cursor: pointer;
+        width: 100%;
+        opacity: 0.9;
+        border-radius: 4px;
+        font-size: 20px;
+      }
+
+      .submitbtn:hover {
+        opacity: 1;
+        background-color: #e7b10a;
+      }
+
+
+      .passwdbtn {
+        background-color: #e7b10a;
+        color: white;
+        padding: 16px 20px;
+        margin: 8px 0;
+        border: none;
+        cursor: pointer;
+        width: 100%;
+        opacity: 0.9;
+        border-radius: 4px;
+        font-size: 20px;
+      }
+
+      .passwdbtn:hover {
+        opacity: 1;
+        background-color: #24503dbe;
+      }
+

src/app/components/AddRecipe/RecipeForm.js

@@ -0,0 +1,69 @@
+'use client';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+import "./RecipeForm.css";
+
+export const RecipeForm = () => {
+    return (
+    <section className="box">
+        <div>
+            <h1>Register here and add your favorite recipe...</h1>
+        </div>
+
+        <div className="row">
+            <div className="column">
+            <form>
+                <div>
+                <h2>Register with email</h2>
+                </div>
+                     <div className="container">
+
+                        <label for="name"><b>Name</b></label>
+                        <input type="name" placeholder="Enter your name" name="name" id="name" required></input>
+                        <label for="username"><b>Username</b></label>
+                        <input type="name" placeholder="Enter your username" name="name" id="name" required></input>
+                        <label for="email"><b>Email address</b></label>
+                        <input type="text" placeholder="Enter your email address" name="email" id="email" required></input>
+                        <label for="psw"><b>Enter password</b></label>
+                        <input type="text" placeholder="Type your password" name="password" id="password" required></input>
+                        <label for="psw"><b>Confirm password</b></label>
+                        <input type="text" placeholder="Repeat your password" name="password" id="password" required></input>
+
+                        <button type="submit" className="submitbtn">REGISTER</button>
+
+                        <div className="field-checkbox">
+                        <input type="checkbox" id="register"></input>
+                        <label for="agreement">Yes, I agree to store my data in this website</label></div>
+                    </div>
+                </form>
+                </div>
+            <div className="column">
+                <form>
+                    <div>
+                    <h2>Log in </h2>
+                    </div>
+                    <div className="container">
+                     <label for="name"><b>Email or username</b></label>
+                        <input type="name" placeholder="Enter your email or username" name="name" id="name" required></input>
+                        <label for="psw"><b>Password</b></label>
+                        <input type="text" placeholder="Enter your password" name="email" id="email" required></input>
+
+
+                        <button type="submit" className="submitbtn">REGISTER</button>
+
+                        <div className="field-checkbox">
+                        <input type="checkbox" id="register"></input>
+                        <label for="login">Remember me</label></div>
+
+                        <br />
+
+
+                        <button type="passwd" className="passwdbtn">Forgot your password</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+   );
+};

src/app/components/ContactPage/ContactBox.css

@@ -0,0 +1,69 @@
+.box {
+    display: row;
+    justify-content: space-around;
+    grid-column: column;
+    box-sizing: border-box;
+    vertical-align: baseline;
+    padding: 80px;
+    margin: 0 20 30px;
+    border: none;
+    font-family: sans-serif;
+  }
+
+.breadcrumb{
+    padding: 20px 16px;
+    list-style: none;
+   background-color: none;
+}
+
+.breadcrumb-item{
+    display: inline;
+    font-size: 22px;
+    font-weight: 500;
+}
+
+.breadcrumb li+li:before{
+    padding: 8px;
+    color: black;
+    content: ">";
+    font-weight: bold;
+}
+
+.breadcrumb-item a{
+    color: #2e4053;
+    text-decoration: none;
+}
+
+.breadcrumb-item a:hover{
+    color: rgb(209, 31, 31);
+}
+
+.imgcontact {
+    display: flex;
+    width:98%;
+    height: 260px;
+    gap: 30%;
+    top: 200px;
+    margin: 20px;
+    border-radius: 4px;
+}
+
+
+@media only screen and (max-width: 600px) {
+    .box {
+      display: block;
+    }
+    .imgcontact {
+      display: block;
+      height: 200px;
+      width: 330px;
+      margin: 0 10%;
+    }
+    .breadcrumb {
+      display: block;
+      margin: auto;
+    }
+  }
+
+
+