214 lines
7.9 KiB
Plaintext
214 lines
7.9 KiB
Plaintext
package templates
|
|
|
|
import "github.com/haydenhargreaves/Potion/internal/templates/components"
|
|
|
|
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 pillButton(name string) {
|
|
<button
|
|
class="w-32 px-4 py-1.5 border-gray-300 border rounded-full hover:border-blue-500 hover:shadow-sm hover:shadow-blue-300 duration-200"
|
|
>
|
|
{ name }
|
|
</button>
|
|
}
|
|
|
|
templ bannerText(content string) {
|
|
<h2 class="text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white">
|
|
{ content }
|
|
</h2>
|
|
}
|
|
|
|
templ searchBar() {
|
|
<div class="relative w-full max-w-xl">
|
|
<input
|
|
type="text"
|
|
placeholder="Search recipes, ingredients..."
|
|
class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<svg
|
|
class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
}
|
|
|
|
templ searchSection() {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@bannerText("Craving Something Specific?")
|
|
<div class="w-full md:w-2/3 px-4 py-6 bg-gray-50 rounded-lg shadow-md flex flex-col gap-4 items-center my-4">
|
|
@searchBar()
|
|
<div class="flex flex-wrap justify-center gap-3 my-4">
|
|
@pillButton("Breakfast")
|
|
@pillButton("Lunch")
|
|
@pillButton("Dinner")
|
|
@pillButton("Desert")
|
|
@pillButton("Snack")
|
|
@pillButton("Side")
|
|
@pillButton("Other")
|
|
</div>
|
|
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 duration-200">
|
|
Search Recipes
|
|
</button>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ highlightSection() {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@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">
|
|
<div
|
|
class="w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4"
|
|
>
|
|
<img class="size-80 md:size-64 rounded-sm" src=""/>
|
|
<div class="mt-8">
|
|
<h2 class="font-semibold">Avocado Toast</h2>
|
|
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
|
Hayden Hargreaves
|
|
</p>
|
|
<p
|
|
class="text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2"
|
|
>
|
|
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-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2">
|
|
Breakfast - 15 min
|
|
</p>
|
|
<button
|
|
class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200"
|
|
>
|
|
Make Now!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ smallRecipeIcon(name, meal, author string) {
|
|
<div
|
|
class="w-44 md:w-48 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0"
|
|
>
|
|
<img class="size-32 md:size-32 rounded-sm" src=""/>
|
|
<div class="w-full mt-8">
|
|
<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
|
|
{ name }
|
|
</h2>
|
|
<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
|
{ author }
|
|
</p>
|
|
<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">{ meal }</p>
|
|
<button
|
|
class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200"
|
|
>
|
|
Make Now!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ listsSection() {
|
|
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
|
|
@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">
|
|
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves")
|
|
</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">
|
|
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Avocado Toast", "Breakfast - 15 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Fried Chicken", "Dinner - 120 min", "Hayden Hargreaves")
|
|
@smallRecipeIcon("Classic Butter Chicken", "Dinner - 60 min", "Hayden Hargreaves")
|
|
</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="/v1/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()
|
|
@listsSection()
|
|
@ctaSection()
|
|
</div>
|
|
</div>
|
|
}
|