d950e75540
This means that we can use the cookie data to load the filters when the search page loads. The final step is making sure the search is complete and the simple redirection. Which will come in the next commit!
114 lines
4.8 KiB
Plaintext
114 lines
4.8 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?")
|
|
@components.SearchBar(domainRecipe.SearchFilters{})
|
|
</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>
|
|
}
|