aesthetics still wip

frontend/src/App.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Index from './components';
+import Create from './components/pages/Create';
 import Explore from './components/pages/Explore';
 import Home from './components/pages/Home';
 import Liked from './components/pages/Liked';
 import Recipe from './components/pages/Recipe';
-import CreateRecipe from './components/recipe/CreateRecipe';
 import GetRecipes from './components/recipe/GetRecipes';
 import './css/index.css';
 
@@ -14,8 +14,7 @@ const App: React.FC = () => {
     <Routes>
       <Route path="/" element={<Index />} />
       <Route path="/app" element={<Home />} />
-      <Route path="/createRecipe" element={<CreateRecipe />} />
-      <Route path="/createRecipe" element={<CreateRecipe />} />
+      <Route path="/createRecipe" element={<Create />} />
       <Route path="/recipes" element={<GetRecipes />} />
       <Route path="/recipes/:id" element={<Recipe />} />
       <Route path="/explore" element={<Explore />} />

frontend/src/components/pages/Create.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Header from './Header';
+import style from './Home.module.css';
+import Navbar from './Navbar';
+import CreateRecipe from '../recipe/CreateRecipe';
+
+const Explore: React.FC = () => {
+  return (
+    <>
+      <div className={style.homePage}>
+        <Header />
+        <div className={style.homeContent}>
+          <CreateRecipe />
+        </div>
+        <Navbar />
+      </div>
+    </>
+  );
+};
+
+export default Explore;

frontend/src/components/pages/Home.module.css

@@ -10,5 +10,5 @@
     display: block;
     overflow-y: scroll;
     overflow-x: hidden;
-    height: 80vh;
+    height: 79vh;
 }

frontend/src/components/pages/Navbar.tsx

@@ -34,7 +34,7 @@ const Navbar: React.FC = () => {
             </a>
           </li>
           <li className={style.navbarChild}>
-            <a href="/createrecipe">
+            <a href="/createRecipe">
               <FontAwesomeIcon icon={faPlus} className={style.icon} />
             </a>
           </li>

frontend/src/components/recipe/CreateRecipe.module.css

@@ -1,36 +1,51 @@
-  .container{
-    display: grid;
-    grid-auto-columns: 1fr;
-    max-width: 500px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 5rem;
-    gap: 1rem;
-  }
-
-  li{
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 1rem;
-  }
-
-label{
+.container {
+  grid-auto-columns: 1fr;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container h2, h4 {
+  text-align: center;
+  color: #333333;
+}
+
+li {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 1rem;
+}
+
+label {
   margin-right: 0.5rem;
 }
 
-input{
+.formChild {
+  margin: 1rem 0;
+}
+
+input {
   width: 100%;
+  border: 2px;
+  border-style: solid;
+  border-color: #F0F0F0;
+  border-radius: 20px;
+  border-width: .1em;
+  border-radius: 5px;
+  height: 1.4rem;
 }
 
-  input:valid{
-    border-color: green;
-  }
+input:valid {
+  background-color: #EFF7ED;
+}
 
-  input:invalid{
-    border-color: red;
-  }
+input:invalid {
+  background-color: #F7EEF8;
+}
 
-  button{
-    padding: 0.3rem;
-    margin: 0.5rem;
-  }
+.btnAddContainer {
+  width: 50vw;
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+}