d4a0b09b11
Looking much better, loving it way more, even though its light mode. It seems to be a bit easier to design applications in light mode.
61 lines
2.0 KiB
Plaintext
61 lines
2.0 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 cravingSomethingSection() {
|
|
<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="flex flex-wrap justify-center gap-3 md:gap-2 my-8 px-2 md:px-0 w-full md:w-2/3">
|
|
@pillButton("Breakfast")
|
|
@pillButton("Lunch")
|
|
@pillButton("Dinner")
|
|
@pillButton("Desert")
|
|
@pillButton("Snack")
|
|
@pillButton("Side")
|
|
@pillButton("Other")
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
templ HomePage() {
|
|
@components.Navbar("home")
|
|
<div class="w-full h-[200vh] 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()
|
|
@cravingSomethingSection()
|
|
</div>
|
|
</div>
|
|
}
|