c0fc47c569
Missing some context storage and better passing of data to allow between the home page to the search page. Need a way to store the search results in state so they can be retrieved when the page is reloaded, etc.
113 lines
4.7 KiB
Plaintext
113 lines
4.7 KiB
Plaintext
package templates
|
|
|
|
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
|
import "github.com/haydenhargreaves/Potion/internal/domain/server"
|
|
|
|
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()
|
|
</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>
|
|
}
|