Potion/internal/templates/pages/home.templ

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-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4">
				<img class="bg-red-500 size-64 rounded-sm" src=""/>
				<div class="mt-8">
					<h2 class="font-semibold">Avocado Toast</h2>
					<p class="text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4]">
						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">
						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 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()
		</div>
	</div>
}