91 lines
2.8 KiB
Plaintext
91 lines
2.8 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 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">
|
|
<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">
|
|
Craving Something Specific?
|
|
</h2>
|
|
<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 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()
|
|
</div>
|
|
</div>
|
|
}
|