(FEAT): Started work on the home page!

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

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"
-			viewBox="0 0 576 512"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
       className={`${current ? "text-blue-500" : "text-gray-700 hover:text-blue-400"} duration-150 h-4`}
-      >
-    <path 
-      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"
-    />
+    >
+      <path
+        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"
+      />
     </svg>
   );
 }

web/src/pages/Home.tsx

@@ -1,5 +1,23 @@
+import SalmonVideo from "../assets/videos/salmon_video.mp4";
+
 export default function Home() {
   return (
-    <p>hello</p>
+    <section className="w-full h-fit mb-16">
+      <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/tsconfig.json

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