From 0781a6c942858317c9d2bf583e1bf5b9ba10972f Mon Sep 17 00:00:00 2001
From: Hayden Hargreaves <hhargreaves2006@gmail.com>
Date: Wed, 4 Jun 2025 21:28:14 -0700
Subject: [PATCH] (UI/STYLE): Finished the UI designs for the creation wizard!

This means its almost time for the backend to begin!
---
 .../controllers/page_html/create.html.heex    | 790 ++++++++++++++++--
 1 file changed, 729 insertions(+), 61 deletions(-)

diff --git a/lib/potion_web/controllers/page_html/create.html.heex b/lib/potion_web/controllers/page_html/create.html.heex
index d186812..a3195e3 100644
--- a/lib/potion_web/controllers/page_html/create.html.heex
+++ b/lib/potion_web/controllers/page_html/create.html.heex
@@ -1,70 +1,738 @@
-<div class="w-full h-full mb-12">
-
+<style>
+  .star-rating input[type="radio"]:checked ~ label {
+    color: #fbbf24;
+  }
+</style>
+<div class="w-full">
+  
 <!-- Container: Page -->
-<div class="w-full h-full flex flex-col">
-
-  <!-- Content: Recipe Creation Form -->
-  <main class="w-full min-h-screen p-4">
-
-    <!-- Section: Heading Banner -->
-    <section class="w-full bg-gradient-to-tr from-primary-600 to-primary-500 
+  <div class="w-full flex flex-col">
+    
+<!-- Content: Recipe Creation Form -->
+    <main class="w-full min-h-screen p-4">
+      
+<!-- Section: Heading Banner -->
+      <section class="w-full bg-gradient-to-tr from-primary-600 to-primary-500 
       text-white text-center px-6 py-10 rounded-lg">
-      <h1 class="text-3xl font-extrabold mb-2">
-        Create Your Recipe
-      </h1>
-      <p class="text-lg mt-4">
-        Share your culinary masterpieces with the world! Fill out the details below 
-        to get started.
-      </p>
-    </section>
-
-    <!-- Section: Recipe Details -->
-    <section class="w-full my-8">
-      <div class="flex flex-col mb-4">
-        <h2 class="text-2xl font-semibold text-white flex items-center">
-          Recipe Details 
-        </h2>
-        <p class="text-red-500 text-sm my-1">*Required</p>
-      </div>
-
-
-      <!-- Title input -->
-      <div class="grid grid-cols-1 gap-6">
-        <div>
-          <label for="title" class="block font-sm font-medium text-background-100">
-            Recipe Title <span class="text-red-500 text-sm my-1">*</span>
-          </label>
-
-          <input 
-            type="text"
-            id="title"
-            name="title"
-            placeholder="e.g., Avocado Toast"
-            class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
-            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
-            maxlength="128" 
-            required />
-
-            <!-- Hidden Messages: Valid or Invalid -->
-            <div class="hidden items-center text-red-600 text-xs mt-1" id="title-error">
-              <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-12a1 1 0 112 0v4a1 1 0 11-2 0V6zm0 8a1 1 0 102 0 1 1 0 00-2 0z" clip-rule="evenodd"></path></svg>
-              Title is required and max 128 characters.
-            </div>
-            <div class="hidden items-center text-green-600 text-xs mt-1" id="title-valid">
-              <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
-              Looks good!
-            </div>
-
-          </div>
-
-
-
-
+        <h1 class="text-3xl font-extrabold mb-2">
+          Create Your Recipe
+        </h1>
+        <p class="text-lg mt-4">
+          Share your culinary masterpieces with the world! Fill out the details below
+          to get started.
+        </p>
+      </section>
+      
+<!-- Section: Recipe Details -->
+      <section class="w-full my-8">
+        <div class="flex flex-col mb-4">
+          <h2 class="text-2xl font-semibold text-white flex items-center">
+            Recipe Details
+          </h2>
+          <p class="text-red-500 text-sm my-1">*Required</p>
         </div>
 
+        <div class="grid grid-cols-1 gap-6">
+          <!-- Input: Title -->
+          <div>
+            <label for="title" class="block font-sm font-medium text-background-100">
+              Recipe Title <span class="text-red-500 text-sm my-1">*</span>
+            </label>
+
+            <input
+              type="text"
+              id="title"
+              name="title"
+              placeholder="e.g., Avocado Toast"
+              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              maxlength="128"
+              required
+            />
+            
+<!-- Hidden Messages: Valid or Invalid -->
+            <!-- <div class="hidden items-center text-red-600 text-xs mt-1" id="title-error"> -->
+            <!--   <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"> -->
+            <!--     <path -->
+            <!--       fill-rule="evenodd" -->
+            <!--       d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-12a1 1 0 112 0v4a1 1 0 11-2 0V6zm0 8a1 1 0 102 0 1 1 0 00-2 0z" -->
+            <!--       clip-rule="evenodd" -->
+            <!--     > -->
+            <!--     </path> -->
+            <!--   </svg> -->
+            <!--   Title is required and max 128 characters. -->
+            <!-- </div> -->
+            <!-- <div class="hidden items-center text-green-600 text-xs mt-1" id="title-valid"> -->
+            <!--   <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"> -->
+            <!--     <path -->
+            <!--       fill-rule="evenodd" -->
+            <!--       d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" -->
+            <!--       clip-rule="evenodd" -->
+            <!--     > -->
+            <!--     </path> -->
+            <!--   </svg> -->
+            <!--   Looks good! -->
+            <!-- </div> -->
+          </div>
+          
+<!-- Input: Description -->
+          <div>
+            <label for="description" class="block font-sm font-medium text-background-100">
+              Recipe Description <span class="text-red-500 text-sm my-1">*</span>
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              rows="6"
+              placeholder="A brief, enticing overview of your delicious recipe..."
+              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              required
+            />
+            
+<!-- Hidden Messages: Valid or Invalid -->
+            <div class="hidden items-center text-red-600 text-xs" id="description-error">
+              <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-12a1 1 0 112 0v4a1 1 0 11-2 0V6zm0 8a1 1 0 102 0 1 1 0 00-2 0z"
+                  clip-rule="evenodd"
+                >
+                </path>
+              </svg>
+              Title is required and max 128 characters.
+            </div>
+            <div class="hidden items-center text-green-600 text-xs" id="description-valid">
+              <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clip-rule="evenodd"
+                >
+                </path>
+              </svg>
+              Looks good!
+            </div>
+          </div>
+          
+<!-- Input: Meal Category -->
+          <div>
+            <label for="category" class="block font-sm font-medium text-background-100">
+              Recipe Category <span class="text-red-500 text-sm my-1">*</span>
+            </label>
+
+            <div class="flex flex-wrap gap-3 mt-2 w-4/5">
+              <div>
+                <input
+                  class="hidden peer"
+                  type="radio"
+                  id="category_breakfast"
+                  name="category"
+                  value="breakfast"
+                />
+                <label
+                  for="category_breakfast"
+                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
+                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
+                >
+                  Breakfast
+                </label>
+              </div>
+              <div>
+                <input
+                  class="hidden peer"
+                  type="radio"
+                  id="category_lunch"
+                  name="category"
+                  value="lunch"
+                />
+                <label
+                  for="category_lunch"
+                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
+                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
+                >
+                  Lunch
+                </label>
+              </div>
+              <div>
+                <input
+                  class="hidden peer"
+                  type="radio"
+                  id="category_dinner"
+                  name="category"
+                  value="dinner"
+                />
+                <label
+                  for="category_dinner"
+                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
+                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
+                >
+                  Dinner
+                </label>
+              </div>
+              <div>
+                <input
+                  class="hidden peer"
+                  type="radio"
+                  id="category_desert"
+                  name="category"
+                  value="desert"
+                />
+                <label
+                  for="category_desert"
+                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
+                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
+                >
+                  Desert
+                </label>
+              </div>
+              <div>
+                <input
+                  class="hidden peer"
+                  type="radio"
+                  id="category_Snack"
+                  name="category"
+                  value="Snack"
+                />
+                <label
+                  for="category_Snack"
+                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
+                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
+                >
+                  Snack
+                </label>
+              </div>
+              <div>
+                <input
+                  class="hidden peer"
+                  type="radio"
+                  id="category_Side"
+                  name="category"
+                  value="Side"
+                />
+                <label
+                  for="category_Side"
+                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
+                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
+                >
+                  Side
+                </label>
+              </div>
+              <div>
+                <input
+                  class="hidden peer"
+                  type="radio"
+                  id="category_other"
+                  name="category"
+                  value="other"
+                />
+                <label
+                  for="category_other"
+                  class="bg-background-100 px-3 py-1.5 rounded-full text-sm font-medium
+                  peer-checked:bg-primary-400 peer-checked:text-white transition-all duration-150"
+                >
+                  Other
+                </label>
+              </div>
+            </div>
+          </div>
+          
+<!-- Input: Serving Side -->
+          <div>
+            <label for="title" class="block font-sm font-medium text-background-100">
+              Serves <span class="text-red-500 text-sm my-1">*</span>
+            </label>
+
+            <input
+              type="number"
+              id="serving"
+              name="serving"
+              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              value="4"
+              min="1"
+              max="16"
+              required
+            />
+          </div>
+          
+<!-- Input: Difficult -->
+          <div>
+            <label for="title" class="block font-sm font-medium text-background-100">
+              Difficulty <span class="text-red-500 text-sm my-1">*</span>
+            </label>
+
+            <div class="star-rating flex flex-row-reverse justify-end unicode-bidi-override">
+              <input type="radio" id="star5" name="difficulty" value="5" class="hidden" />
+              <label
+                for="star5"
+                title="5 stars"
+                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
+              >
+                ★
+              </label>
+              <input type="radio" id="star4" name="difficulty" value="4" class="hidden" />
+              <label
+                for="star4"
+                title="4 stars"
+                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
+              >
+                ★
+              </label>
+              <input type="radio" id="star3" name="difficulty" value="3" class="hidden" />
+              <label
+                for="star3"
+                title="3 stars"
+                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
+              >
+                ★
+              </label>
+              <input type="radio" id="star2" name="difficulty" value="2" class="hidden" />
+              <label
+                for="star2"
+                title="2 stars"
+                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
+              >
+                ★
+              </label>
+              <input type="radio" id="star1" name="difficulty" value="1" required class="hidden" />
+              <label
+                for="star1"
+                title="1 star"
+                class="text-3xl cursor-pointer transition-colors duration-200 ease-in-out text-background-100"
+              >
+                ★
+              </label>
+            </div>
+          </div>
+          
+<!-- Input: Serving Side -->
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label for="title" class="block font-sm font-medium text-background-100">
+                Prep Time (minutes) <span class="text-red-500 text-sm my-1">*</span>
+              </label>
+
+              <input
+                type="number"
+                id="prep-time"
+                name="prep-time"
+                class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+                value="15"
+                min="0"
+                max="120"
+                required
+              />
+            </div>
+            <div>
+              <label for="title" class="block font-sm font-medium text-background-100">
+                Cook Time (minutes) <span class="text-red-500 text-sm my-1">*</span>
+              </label>
+
+              <input
+                type="number"
+                id="cook-time"
+                name="cook-time"
+                class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+                value="30"
+                min="0"
+                max="120"
+                required
+              />
+            </div>
+          </div>
+        </div>
       </section>
 
-    </main>
+      <hr class="text-background-200" />
+      
+<!-- Section: Ingredients -->
+      <section class="w-full my-8">
+        <div class="flex flex-col mb-4">
+          <h2 class="text-2xl font-semibold text-white flex items-center">
+            Ingredients <span class="text-red-500 text-sm m-1">*</span>
+          </h2>
+        </div>
+        
+<!-- List: Ingredients -->
+        <ul class="">
+          <li class="flex gap-2">
+            <input
+              type="text"
+              id="ingredient-1"
+              name="ingredient-1"
+              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm flex-grow
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              placeholder="e.g., All-purpose flour"
+              required
+            />
+            <input
+              type="text"
+              id="quantity-1"
+              name="quantity-1"
+              class="my-1 w-2/5 px-4 py-2 border border-background-200 rounded-md shadow-sm
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              placeholder="2 cups"
+              required
+            />
 
+            <button class="my-1 p-2 border border-background-200 rounded-md shadow-sm">
+              <svg
+                class="h-6 text-red-500"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M4 7H20"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6 10L7.70141 19.3578C7.87432 20.3088 8.70258 21 9.66915 21H14.3308C15.2974 21 16.1257 20.3087 16.2986 19.3578L18 10"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </li>
+          <li class="flex gap-2">
+            <input
+              type="text"
+              id="ingredient-1"
+              name="ingredient-1"
+              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm flex-grow
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              placeholder="e.g., All-purpose flour"
+              required
+            />
+            <input
+              type="text"
+              id="quantity-1"
+              name="quantity-1"
+              class="my-1 w-2/5 px-4 py-2 border border-background-200 rounded-md shadow-sm
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              placeholder="2 cups"
+              required
+            />
+
+            <button class="my-1 p-2 border border-background-200 rounded-md shadow-sm">
+              <svg
+                class="h-6 text-red-500"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M4 7H20"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6 10L7.70141 19.3578C7.87432 20.3088 8.70258 21 9.66915 21H14.3308C15.2974 21 16.1257 20.3087 16.2986 19.3578L18 10"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </li>
+          <li class="flex gap-2">
+            <input
+              type="text"
+              id="ingredient-1"
+              name="ingredient-1"
+              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm flex-grow
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              placeholder="e.g., All-purpose flour"
+              required
+            />
+            <input
+              type="text"
+              id="quantity-1"
+              name="quantity-1"
+              class="my-1 w-2/5 px-4 py-2 border border-background-200 rounded-md shadow-sm
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              placeholder="2 cups"
+              required
+            />
+
+            <button class="my-1 p-2 border border-background-200 rounded-md shadow-sm">
+              <svg
+                class="h-6 text-red-500"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M4 7H20"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6 10L7.70141 19.3578C7.87432 20.3088 8.70258 21 9.66915 21H14.3308C15.2974 21 16.1257 20.3087 16.2986 19.3578L18 10"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </li>
+        </ul>
+
+        <div class="flex items-center justify-start my-4">
+          <button class="bg-primary-400 text-white px-6 py-2 rounded-md font-medium
+            focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+            Add Ingredient
+          </button>
+        </div>
+      </section>
+
+      <hr class="text-background-200" />
+      
+<!-- Section: Instructions -->
+      <section class="w-full my-8">
+        <div class="flex flex-col mb-4">
+          <h2 class="text-2xl font-semibold text-white flex items-center">
+            Instructions <span class="text-red-500 text-sm m-1">*</span>
+          </h2>
+        </div>
+        
+<!-- List: Instructions -->
+        <ul class="flex flex-col gap-2">
+          <li class="flex flex-col gap-2">
+            <div class="flex items-center justify-between">
+              <label class="text-white text-xl font-semibold">
+                Step 1
+              </label>
+              <button class="my-1 p-2 border border-background-200 rounded-md shadow-sm">
+                <svg
+                  class="h-5 text-red-500"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 7H20"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6 10L7.70141 19.3578C7.87432 20.3088 8.70258 21 9.66915 21H14.3308C15.2974 21 16.1257 20.3087 16.2986 19.3578L18 10"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <textarea
+              id="step-1"
+              name="step-1"
+              rows="6"
+              placeholder="Describe this step in detail..."
+              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              required
+            />
+          </li>
+          <li class="flex flex-col gap-2">
+            <div class="flex items-center justify-between">
+              <label class="text-white text-xl font-semibold">
+                Step 2
+              </label>
+              <button class="my-1 p-2 border border-background-200 rounded-md shadow-sm">
+                <svg
+                  class="h-5 text-red-500"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 7H20"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6 10L7.70141 19.3578C7.87432 20.3088 8.70258 21 9.66915 21H14.3308C15.2974 21 16.1257 20.3087 16.2986 19.3578L18 10"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <textarea
+              id="step-2"
+              name="step-2"
+              rows="6"
+              placeholder="Describe this step in detail..."
+              class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+              required
+            />
+          </li>
+        </ul>
+
+        <div class="flex items-center justify-start my-4">
+          <button class="bg-primary-400 text-white px-6 py-2 rounded-md font-medium
+            focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+            Add Instruction
+          </button>
+        </div>
+      </section>
+
+      <hr class="text-background-200" />
+      
+<!-- Section: Media & Tags -->
+      <section class="w-full my-8">
+        <div class="flex flex-col mb-4">
+          <h2 class="text-2xl font-semibold text-white flex items-center">
+            Media & Tags <span class="text-background-100 text-sm mx-2">(optional)</span>
+          </h2>
+        </div>
+        
+<!-- Element: Image Upload -->
+        <div>
+          <label for="image" class="block font-sm font-medium text-background-100">
+            Recipe Image
+          </label>
+          <div class="mt-1 flex justify-center p-6 border-2 border-background-200 border-dashed rounded-md">
+            <div class="space-y-1 text-center">
+              <svg
+                class="size-16 mx-auto text-background-200"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.2639 15.9375L12.5958 14.2834C11.7909 13.4851 11.3884 13.086 10.9266 12.9401C10.5204 12.8118 10.0838 12.8165 9.68048 12.9536C9.22188 13.1095 8.82814 13.5172 8.04068 14.3326L4.04409 18.2801M14.2639 15.9375L14.6053 15.599C15.4112 14.7998 15.8141 14.4002 16.2765 14.2543C16.6831 14.126 17.12 14.1311 17.5236 14.2687C17.9824 14.4251 18.3761 14.8339 19.1634 15.6514L20 16.4934M14.2639 15.9375L18.275 19.9565M18.275 19.9565C17.9176 20 17.4543 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.71569 19.5903 4.40973 19.2843 4.21799 18.908C4.12796 18.7313 4.07512 18.5321 4.04409 18.2801M18.275 19.9565C18.5293 19.9256 18.7301 19.8727 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V16.4934M4.04409 18.2801C4 17.9221 4 17.4575 4 16.8V7.2C4 6.0799 4 5.51984 4.21799 5.09202C4.40973 4.71569 4.71569 4.40973 5.09202 4.21799C5.51984 4 6.07989 4 7.2 4H16.8C17.9201 4 18.4802 4 18.908 4.21799C19.2843 4.40973 19.5903 4.71569 19.782 5.09202C20 5.51984 20 6.0799 20 7.2V16.4934M17 8.99989C17 10.1045 16.1046 10.9999 15 10.9999C13.8954 10.9999 13 10.1045 13 8.99989C13 7.89532 13.8954 6.99989 15 6.99989C16.1046 6.99989 17 7.89532 17 8.99989Z"
+                  stroke="currentColor"
+                  stroke-width="1"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <div class="flex text-sm text-background-100">
+                <label
+                  for="file-upload"
+                  class="relative cursor-pointer font-medium text-primary-200 underline"
+                >
+                  <span>Upload a file</span>
+                  <input id="file-upload" name="file-upload" type="file" class="sr-only" />
+                </label>
+                <p class="pl-1">or drag and drop</p>
+              </div>
+              <p class="text-xs text-background-200">PNG, JPG, GIF up to 10MB</p>
+            </div>
+          </div>
+        </div>
+        
+<!-- Element: Tag Selector & List -->
+        <div class="my-4">
+          <label for="tags" class="block font-sm font-medium text-background-100">
+            Tags
+          </label>
+          <input
+            type="text"
+            id="tags"
+            name="tags"
+            placeholder="Add tags (e.g., quick, pasta, high protien)"
+            class="my-1 w-full px-4 py-2 border border-background-200 rounded-md shadow-sm 
+            focus:ring-primary-500 focus:border-primary-500 bg-transparent text-background-100"
+            maxlength="32"
+          />
+
+          <ul class="flex flex-wrap gap-2 my-2">
+            <li class="">
+              <button class="px-3 py-0.5 bg-primary-400 text-white rounded-full text-sm font-medium">
+                Quick
+              </button>
+            </li>
+            <li class="">
+              <button class="px-3 py-0.5 bg-primary-400 text-white rounded-full text-sm font-medium">
+                High-Protein
+              </button>
+            </li>
+            <li class="">
+              <button class="px-3 py-0.5 bg-primary-400 text-white rounded-full text-sm font-medium">
+                Healthy
+              </button>
+            </li>
+            <li class="">
+              <button class="px-3 py-0.5 bg-primary-400 text-white rounded-full text-sm font-medium">
+                Nutrient-Rich
+              </button>
+            </li>
+          </ul>
+        </div>
+      </section>
+      
+<!-- Section: Save Recipe -->
+      <section class="w-full mt-16 mb-8 flex justify-end">
+        <button
+          type="submit"
+          class="px-6 py-3 bg-gradient-to-tr from-primary-500 to-primary-400 text-white 
+        rounded-md font-semibold"
+        >
+          Save Recipe
+        </button>
+      </section>
+    </main>
   </div>
 </div>