d29426290d
The make button is pretty much done, just need to finish up by rate limiting it. That will take place in the engagement repository. Sharing works as well, just a UI change, there is no backend yet, maybe there should be an engagement type for sharing recipes. But not totally sure. The viewing is also in a semi-working state. It does not create requests for users that aren't signed in, which needs to come. With that update there is a need to update HOW the requests come in, we don't need it every time we load the page. Maybe just when we click to it, from somewhere else? Finally, the favoriting does not totally work. The entry into the engagement table is complete, but the actual favorites table, favorite creation, button toggling AND button rendering is not implemented yet.
111 lines
5.0 KiB
Plaintext
111 lines
5.0 KiB
Plaintext
package templates
|
|
|
|
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
|
import "github.com/haydenhargreaves/Potion/internal/domain/server"
|
|
import domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"
|
|
|
|
templ introSection() {
|
|
<section class="w-full h-fit mb-16">
|
|
<div class="relative">
|
|
<video class="" autoplay loop muted playsinline>
|
|
<source src="/v1/web/static/img/salmon_video.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 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>
|
|
}
|
|
|
|
templ searchSection() {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@components.BannerText("Craving Something Specific?")
|
|
<div class="w-full md:w-3/4">
|
|
@components.SearchBar(domainRecipe.SearchFilters{}, true, false)
|
|
</div>
|
|
<div class="hidden" id="result-list"></div>
|
|
</section>
|
|
}
|
|
|
|
templ highlightSection(liked bool) {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@components.BannerText("Recipe of the Week!")
|
|
<p class="leading-relaxed p-4 my-8">
|
|
Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
|
|
our community loves most. This isn't just about how many people view a recipe; it's also about
|
|
how many times it's been made, liked, reviewed, and its average rating, all combined to find
|
|
the true fan favorite of the week. It's our way of highlighting the best recipes that truly
|
|
resonate with our users!
|
|
</p>
|
|
<div class="flex items-center justify-center w-full">
|
|
@components.RecipeCardLarge(false)
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ listsSection() {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@components.BannerText("Take Another Look.")
|
|
<div class="w-full">
|
|
<h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
|
|
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
|
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
|
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
|
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
|
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
|
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
|
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
|
</div>
|
|
<h3 class="text-lg mt-8 mx-4">Make again</h3>
|
|
<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
|
|
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
|
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
|
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
|
@components.RecipeCardSmall("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves", true)
|
|
@components.RecipeCardSmall("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves", false)
|
|
@components.RecipeCardSmall("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves", false)
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ ctaSection() {
|
|
<section
|
|
class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center">
|
|
<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
|
|
Unleash Your Inner Chef!
|
|
</h2>
|
|
<p class="text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed">
|
|
Have a unique recipe idea? Want to share your culinary masterpiece with the world?
|
|
It's time to bring your creations to life!
|
|
</p>
|
|
<a href={ domain.WEB_CREATE } class="flex items-center justify-center
|
|
bg-gradient-to-r from-blue-400 to-blue-600 text-white
|
|
px-12 py-5 rounded-full shadow-sm hover:shadow-md
|
|
transition-all duration-300 ease-in-out shadow-blue-700
|
|
text-lg md:text-2xl font-bold uppercase tracking-wide">
|
|
Create Your Recipe!
|
|
</a>
|
|
</section>
|
|
}
|
|
|
|
templ HomePage() {
|
|
@components.Navbar("home")
|
|
<div class="w-full h-fit flex justify-center">
|
|
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
|
|
@introSection()
|
|
@searchSection()
|
|
@highlightSection(false)
|
|
@listsSection()
|
|
@ctaSection()
|
|
</div>
|
|
</div>
|
|
}
|