diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index ad20523..d33f807 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -28,6 +28,7 @@ module.exports = { 400: "#8a0bd9", 500: "#6707a3", 600: "#4a0575", + 700: "#2a0442", }, } }, diff --git a/lib/potion_web/controllers/page_html/home.html.heex b/lib/potion_web/controllers/page_html/home.html.heex index 50782e5..49a7f46 100644 --- a/lib/potion_web/controllers/page_html/home.html.heex +++ b/lib/potion_web/controllers/page_html/home.html.heex @@ -6,13 +6,67 @@ --> -
+
-
+
+ + +
+ +
+ + +

+ Discover Your Next Favorite Meal! +

+
+ +

+ 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. +

+
+ + +
+

+ Craving Something Specific? +

+ + +
+
+

Breakfast

+
+
+

Lunch

+
+
+

Dinner

+
+
+

Dessert

+
+
+

Snack

+
+
+

Any

+
+
+
-
+
- -
+ +

- Recently Viewed + Recipe of the Week +

+ + +
+ + +
+
+

+ Avacado Toast +

+ +

+ 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. +

+ +

+ Breakfast - 10 min +

+ +
+ +
+
+
+
+ + +
+

+ Recently viewed

@@ -51,6 +144,10 @@ Avacado Toast

+

+ Breakfast +

+

10 min

+

+ Dinner +

+

90 min

+

+ Breakfast +

+

15 min

-
+

Make again

@@ -162,6 +267,10 @@ Avacado Toast

+

+ Breakfast +

+

10 min

+

+ Dinner +

+

90 min

+

+ Breakfast +

+

15 min

+ + +
+
+

Got a Recipe to Share?

+

+ Unleash your inner chef! Share your unique recipes with our community and inspire others with your culinary genius. +

+ +
+
diff --git a/priv/static/images/cooking_salt.mp4 b/priv/static/images/cooking_salt.mp4 new file mode 100644 index 0000000..6fbde47 Binary files /dev/null and b/priv/static/images/cooking_salt.mp4 differ diff --git a/spec/TechnicalSpecification.md b/spec/TechnicalSpecification.md index c27abf0..56a4a18 100644 --- a/spec/TechnicalSpecification.md +++ b/spec/TechnicalSpecification.md @@ -2,6 +2,7 @@ - [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 - - [ ] Scrolling list of the most recent 5-10 trending recipes - - [ ] **Display recipe details** - Title, duration, **image***, meal category, and a heart to like the recipe - +- [ ] Create Recipe CTA (call-to-action) + - [ ] **Large CTA banner** with text prompting users to create a 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