(UI/STYLE): Completed* the home page.

Of course, its not 100% done, it will always be a WIP. But for now,
moving on. Specs are up to date as well.

assets/tailwind.config.js

@@ -28,6 +28,7 @@ module.exports = {
           400: "#8a0bd9",
           500: "#6707a3",
           600: "#4a0575",
+          700: "#2a0442",
         },
       }
     },

lib/potion_web/controllers/page_html/home.html.heex

@@ -6,13 +6,67 @@
 </div>
 -->
 
-<div class="w-full h-full">
+<div class="w-full h-full mb-12">
   
 <!-- Container: Page -->
-  <div class="w-full h-full flex flex-col p-4">
+  <div class="w-full h-full flex flex-col">
+    
+<!-- Section: Welcome Banner -->
+    <section class="w-full h-fit">
+      <!-- Element: Background Video -->
+      <div class="relative">
+        <video autoplay loop muted playsinline class="opacity-80">
+          <source src="/images/cooking_salt.mp4" type="video/mp4" />
+        </video>
+
+        <h1 class="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 class="leading-relaxed text-white 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>
+    
+<!-- Section: Craving Something... Banner -->
+    <section class="w-full flex flex-col items-center justify-center my-8 py-4">
+      <h2 class="text-xl sm:text-2xl font-semibold text-white mb-6 
+        bg-gradient-to-t from-background-400 to-background-300
+        py-4 w-full text-center border-b-background-500
+        ">
+        Craving Something Specific?
+      </h2>
+      
+<!-- Element: Pill Button Group -->
+      <div class="px-4 grid grid-cols-3 gap-4">
+        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
+          <p>Breakfast</p>
+        </div>
+        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
+          <p>Lunch</p>
+        </div>
+        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
+          <p>Dinner</p>
+        </div>
+        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
+          <p>Dessert</p>
+        </div>
+        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
+          <p>Snack</p>
+        </div>
+        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
+          <p>Any</p>
+        </div>
+      </div>
+    </section>
     
 <!-- Section: Search -->
-    <section class="w-full h-fit flex items-center justify-center gap-x-5 my-8">
+    <section class="w-full h-fit flex items-center justify-center gap-x-5 my-8 p-4">
       <input
         type="search"
         name="search-bar"
@@ -36,10 +90,49 @@
       </svg>
     </section>
     
-<!-- Section: Viewed Recently -->
+<!-- Section: Recipe of the Week -->
-    <section class="w-full flex flex-col my-4">
+    <section class="w-full flex flex-col my-4 p-4 relative">
       <h2 class="text-md text-white my-2">
-        Recently Viewed
+        Recipe of the Week
+      </h2>
+      
+<!-- Element: Spotlight -->
+      <div class="absolute size-64 bg-white rounded-full blur-3xl -z-10 bottom-0 -translate-y-1/4 left-1/2 -translate-x-1/2" />
+      
+<!-- Element: Recipe OTW Display -->
+      <div class="w-full flex justify-center my-4">
+        <div class="w-3/4 h-[450px] bg-gradient-to-t from-background-400 to-background-300 
+          rounded-lg shadow-black shadow-md flex flex-col items-start justify-end p-4 text-white">
+          <h3 class="text-lg overflow-hidden whitespace-nowrap text-ellipsis w-full font-semibold">
+            Avacado Toast
+          </h3>
+
+          <p class="text-sm overflow-hidden text-white [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4]">
+            Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
+            make the BEST avocado toast with this recipe, plus fun variations.
+            Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
+            make the BEST avocado toast with this recipe, plus fun variations.
+            Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
+            make the BEST avocado toast with this recipe, plus fun variations.
+          </p>
+
+          <p class="text-sm italic text-background-100 mt-2">
+            Breakfast - 10 min
+          </p>
+
+          <div class="w-full flex justify-center mt-4">
+            <button class="w-full py-3 bg-gradient-to-t from-background-300 to-background-200 rounded-lg shadow-sm shadow-black">
+              Make Now!
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+<!-- Section: Viewed Recently -->
+    <section class="w-full flex flex-col my-4 p-4">
+      <h2 class="text-md text-white my-2">
+        Recently viewed
       </h2>
       
 <!-- List: Recent Views-->
@@ -51,6 +144,10 @@
               Avacado Toast
             </p>
 
+            <p class="text-xs italic text-background-100">
+              Breakfast
+            </p>
+
             <div class="flex items-center justify-between w-full text-xs">
               <p>10 min</p>
               <svg
@@ -84,6 +181,10 @@
               Fried Chicken
             </p>
 
+            <p class="text-xs italic text-background-100">
+              Dinner
+            </p>
+
             <div class="flex items-center justify-between w-full text-xs">
               <p>90 min</p>
               <svg
@@ -117,6 +218,10 @@
               Steak & Eggs
             </p>
 
+            <p class="text-xs italic text-background-100">
+              Breakfast
+            </p>
+
             <div class="flex items-center justify-between w-full text-xs">
               <p>15 min</p>
               <svg
@@ -148,7 +253,7 @@
     </section>
     
 <!-- Section: Make Again -->
-    <section class="w-full flex flex-col my-4">
+    <section class="w-full flex flex-col my-4 p-4">
       <h2 class="text-md text-white my-2">
         Make again
       </h2>
@@ -162,6 +267,10 @@
               Avacado Toast
             </p>
 
+            <p class="text-xs italic text-background-100">
+              Breakfast
+            </p>
+
             <div class="flex items-center justify-between w-full text-xs">
               <p>10 min</p>
               <svg
@@ -195,6 +304,10 @@
               Fried Chicken
             </p>
 
+            <p class="text-xs italic text-background-100">
+              Dinner
+            </p>
+
             <div class="flex items-center justify-between w-full text-xs">
               <p>90 min</p>
               <svg
@@ -228,6 +341,10 @@
               Steak & Eggs
             </p>
 
+            <p class="text-xs italic text-background-100">
+              Breakfast
+            </p>
+
             <div class="flex items-center justify-between w-full text-xs">
               <p>15 min</p>
               <svg
@@ -257,5 +374,18 @@
         </ul>
       </div>
     </section>
+    
+<!-- Section: Recipe to Share Section -->
+    <section class="w-full my-8 p-4">
+      <div class="bg-gradient-to-tr from-primary-700 to-primary-600 rounded-lg px-8 py-12 text-center shadow-xl">
+        <h2 class="text-2xl font-bold text-white mb-4">Got a Recipe to Share?</h2>
+        <p class="text-white text-lg leading-relaxed mb-6">
+          Unleash your inner chef! Share your unique recipes with our community and inspire others with your culinary genius.
+        </p>
+        <button class="inline-block px-10 py-4 bg-white text-primary-700 font-bold text-lg rounded-full shadow-lg">
+          Create Now!
+        </button>
+      </div>
+    </section>
   </div>
 </div>

spec/TechnicalSpecification.md

@@ -2,6 +2,7 @@
 
 <!--toc:start-->
 - [Technical Specifications](#technical-specifications)
+  - [Devices & Responsiveness](#devices-responsiveness)
   - [Page Requirements](#page-requirements)
       - [Home](#home)
         - [UI Requirements](#ui-requirements)
@@ -18,6 +19,11 @@
 
 Application specifications.
 
+## Devices & Responsiveness
+
+This application is a web app, however, it is built following a "mobile-first" pattern. Which 
+means the desktop interface is lacking and will be designed after the completion of the mobile 
+web interface.
 
 ## Page Requirements
 
@@ -31,6 +37,16 @@ Home page will server as the landing page where users can search recipes, filter
 well as view lists of recently made recipes, recently viewed and trending recipes lists.
 
 ##### UI Requirements
+
+- [ ] Welcome Banner
+    - [ ] Video display with large text overhead
+    - [ ] Sub text below the video with a "Call to Action"
+    - [ ] Interactive banner that can be hidden with a "Got it!" or "X"
+
+- [ ] Message & Pills Banner
+    - [ ] Message with text like "Craving Something Specific?"
+    -  [ ] Pill buttons below which allow for a direct search for meal type
+
 - [ ] Search bar
     - [ ] Ability to search for recipes, meals, and tags
 
@@ -40,6 +56,11 @@ well as view lists of recently made recipes, recently viewed and trending recipe
     - [ ] **Filter by difficulty** - *1 to 5 stars*
     -  [ ] **Filter by serving size** - *1 to 16*
 
+- [ ] Recipe of The Week
+    - [ ] **Single recipe display** of the best performing recipe, with spotlight effect
+    - [ ] **Display recipe details in depth** - Title, duration, **image***, meal category, simplified description
+    - [ ] **Make now** button to allow easy access to meal directions
+
 - [ ] Recently Viewed List
     - [ ] Scrolling list of the most recent 5-10 recipes viewed
     - [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
@@ -48,16 +69,18 @@ well as view lists of recently made recipes, recently viewed and trending recipe
     - [ ] Scrolling list of the most recent 5-10 recipes made
     - [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
 
-- [ ] Trending Recipes List
+- [ ] Create Recipe CTA (call-to-action)
-    - [ ] Scrolling list of the most recent 5-10 trending recipes
+    - [ ] **Large CTA banner** with text prompting users to create a recipe
-    - [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe
+    - [ ] **Button** to take the user to the create page
-
 
 '*': Not sure yet, still under consideration
 
 
 ##### API Requirements
 
+- [ ] Message & Pills Banner
+    - [ ] Search all recipes of a specific meal type
+
 - [ ] Search bar
     - [ ] Text search on titles based on search query
     - [ ] Text search on tags based on search query
@@ -69,6 +92,16 @@ well as view lists of recently made recipes, recently viewed and trending recipe
     - [ ] Update search to only contain meals that meet the difficulty level of the selected filter
     - [ ] Update search to only contain meals that meet the serving size of the selected filter
 
+- [ ] Recipe of The Week
+    - [ ] Fetch the most performing recipe of the last 7 days and all of the required meta data
+        - [ ] Most views (W: 0.1)
+        - [ ] Most makes (W: 0.5)
+        - [ ] Most likes (W: 0.3)
+        - [ ] Most reviews (W: 0.4)
+        - [ ] Highest avg rating (W: 0.2/star, 0.0 - 1.0)
+    - [ ] Direct a user to the recipes display page
+    - [ ] Telemetry data to collect clicks for each recipe
+
 - [ ] Recently Viewed List
     - [ ] Fetch a list of recently viewed meals and all required meta data
     - [ ] Like a post and store it in user's liked posts list
@@ -81,13 +114,6 @@ well as view lists of recently made recipes, recently viewed and trending recipe
     - [ ] Direct a user to the recipes display page
     - [ ] Telemetry data to collect clicks for each recipe
 
-- [ ] Trending Recipes List
-    - [ ] Fetch a list of recipes and all required meta data with the most likes in the last week
-    - [ ] Like a post and store it in user's liked posts list
-    - [ ] Direct a user to the recipes display page
-    - [ ] Telemetry data to collect clicks for each recipe
-
-
 '**': Not sure implementation