(FEAT): Started work on the home page!

This is going by very quick, at least the static pieces.

web/src/App.tsx

@@ -4,6 +4,10 @@ import WebLayout from "./layouts/WebLayout";
 import NotFound from './pages/NotFound';
 
 import ROUTE_CONSTANTS from './types/routes';
+import Create from './pages/Create';
+import Favorites from './pages/Favorites';
+import Profile from './pages/Profile';
+import ShoppingList from './pages/ShoppingList';
 
 function App() {
   return (
@@ -13,6 +17,11 @@ function App() {
         <Route path="/v2/web" element={<WebLayout />}>
           <Route index element={<Navigate to={ROUTE_CONSTANTS.Home} replace />} />
           <Route path="home" element={<Home />} />
+          <Route path="favorites" element={<Favorites />} />
+          <Route path="create" element={<Create />} />
+          <Route path="profile" element={<Profile />} />
+          <Route path="list" element={<ShoppingList />} />
+
           {/* <Route path="recipe/:id" element={<Home />} /> */}
 
         </Route>

web/src/components/Navigation.tsx

@@ -38,7 +38,7 @@ export default function Navigation() {
                   d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
                 ></path>
               </svg>
-              <svg 
+              <svg
                 className={`${displayHamburgerMenu ? "hidden" : "flex"} size-5`}
                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                 <path

web/src/components/icons/ShoppingListIcon.tsx

@@ -6,14 +6,14 @@ interface ShoppingListIconProps {
 export default function ShoppingListIcon({ current }: ShoppingListIconProps) {
   return (
     <svg
-			xmlns="http://www.w3.org/2000/svg"
+      xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 576 512"
+      viewBox="0 0 576 512"
       className={`${current ? "text-blue-500" : "text-gray-700 hover:text-blue-400"} duration-150 h-4`}
-      >
+    >
-    <path 
+      <path
-      fill="currentColor"
+        fill="currentColor"
-      d="M0 24C0 10.7 10.7 0 24 0L69.5 0c22 0 41.5 12.8 50.6 32l411 0c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3l-288.5 0 5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5L488 336c13.3 0 24 10.7 24 24s-10.7 24-24 24l-288.3 0c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5L24 48C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
+        d="M0 24C0 10.7 10.7 0 24 0L69.5 0c22 0 41.5 12.8 50.6 32l411 0c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3l-288.5 0 5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5L488 336c13.3 0 24 10.7 24 24s-10.7 24-24 24l-288.3 0c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5L24 48C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
-    />
+      />
     </svg>
   );
 }

web/src/layouts/WebLayout.tsx

@@ -6,8 +6,14 @@ export default function WebLayout() {
 
   return (
     <>
-      <Navigation />
+      <div className="bg-gray-100 min-h-screen">
-      <Outlet />
+        <Navigation />
+        <div className="w-full flex justify-center">
+          <div className="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 min-h-screen h-fit border-l border-r border-gray-300 bg-white">
+            <Outlet />
+          </div>
+        </div>
+      </div>
     </>
 
   );

web/src/pages/Create.tsx

@@ -0,0 +1,8 @@
+
+export default function Create() {
+  return (
+    <>
+      <p>Create</p>
+    </>
+  );
+}

web/src/pages/Favorites.tsx

@@ -0,0 +1,7 @@
+export default function Favorites() {
+  return (
+    <>
+      <p>Favorites</p>
+    </>
+  );
+}

web/src/pages/Home.tsx

@@ -1,9 +1,23 @@
-
+import SalmonVideo from "../assets/videos/salmon_video.mp4";
 
 export default function Home() {
   return (
-    <>
+    <section className="w-full h-fit mb-16">
-      <p className="text-red-500">Hello world </p>
+      <div className="relative">
-    </>
+        <video autoPlay loop muted playsInline>
+          <source src={SalmonVideo} type="video/mp4" />
+        </video>
+        <h1 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
+          text-white text-3xl w-4/5 font-bold z-10">
+          Discover Your Next Favorite Meal
+        </h1>
+      </div>
+      <p className="leading-relaxed p-4 my-8">
+        Welcome to your ultimate recipe hub! Whether you're a seasoned chef or just starting your culinary adventure,
+        we're here to inspire. Explore thousands of delicious recipes, from quick weeknight dinners to gourmet delights,
+        all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
+        browse our trending dishes for fresh ideas.
+      </p>
+    </section>
   );
 }

web/src/pages/NotFound.tsx

@@ -1,9 +1,24 @@
+import ROUTE_CONSTANTS from "../types/routes";
 
 export default function NotFound() {
-
   return (
-    <>
+    <div className="w-full h-[85vh] flex justify-center">
-      <h1>Not Found!</h1>
+      <div className="flex flex-col items-center justify-center gap-y-4">
-    </>
+        <div className="flex flex-col items-center justify-center">
+          <svg
+            className="h-20 md:h-24 text-blue-700 motion-safe:animate-bounce ease-in-out"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 448 512"
+            fill="currentColor"
+          >
+            <path d="M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z" />
+          </svg>
+          <div className="bg-black size-10 md:size-12 blur rounded-full scale-x-150 scale-y-50 -mt-1 md:-mt-2 opacity-50"></div>
+        </div>
+        <h1 className="text-gray-500 text-6xl md:text-8xl font-sans">404</h1>
+        <p className="text-sm md:text-base text-gray-700">This page could not be found!</p>
+        <a className="underline text-sm md:text-base text-blue-700" href={ROUTE_CONSTANTS.Home}>Back Home</a>
+      </div>
+    </div>
   );
 }

web/src/pages/Profile.tsx

@@ -0,0 +1,7 @@
+export default function Profile() {
+  return (
+    <>
+      <p>Profile</p>
+    </>
+  );
+}

web/src/pages/ShoppingList.tsx

@@ -0,0 +1,7 @@
+export default function ShoppingList() {
+  return (
+    <>
+      <p>ShoppingList</p>
+    </>
+  );
+}

web/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "files": [],
   "references": [
-    { "path": "./tsconfig.app.json" },
+    {
-    { "path": "./tsconfig.node.json" }
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
   ]
 }