Potion/lib/potion_web/controllers/page_html/home.html.heex

<div class="w-full h-full mb-12">
  
<!-- Container: Page -->
  <div class="w-full h-full flex flex-col">
    
<!-- Section: Welcome Banner -->
    <section class="w-full h-fit">
      <!-- Element: Background Video -->
      <div class="relative">
        <video autoplay loop muted playsinline class="opacity-80">
          <source src="/images/cooking_salt.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 text-white 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>
    
<!-- Section: Craving Something... Banner -->
    <section class="w-full flex flex-col items-center justify-center my-8 py-4">
      <h2 class="text-xl sm:text-2xl font-semibold text-white mb-6 
        bg-gradient-to-t from-background-400 to-background-300
        py-4 w-full text-center border-b-background-500
        ">
        Craving Something Specific?
      </h2>
      
<!-- Element: Pill Button Group -->
      <div class="px-4 grid grid-cols-3 gap-4">
        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
          <p>Breakfast</p>
        </div>
        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
          <p>Lunch</p>
        </div>
        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
          <p>Dinner</p>
        </div>
        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
          <p>Dessert</p>
        </div>
        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
          <p>Snack</p>
        </div>
        <div class="text-md py-1.5 px-3 rounded-lg text-white bg-gradient-to-tr from-primary-600 to-primary-500 shadow-md shadow-primary-600 text-center">
          <p>Any</p>
        </div>
      </div>
    </section>
    
<!-- Section: Search -->
    <section class="w-full h-fit flex items-center justify-center gap-x-5 my-8 p-4">
      <input
        type="search"
        name="search-bar"
        id="search-bar"
        placeholder="Search recipe, food group, idea"
        class="w-full bg-background-300 border-none rounded-md text-white placeholder:italic
         focus:outline-none focus:ring-2 focus:ring-primary-200 focus:ring-offset-2 focus:ring-offset-background-300"
      />
      <svg
        class="h-9 text-primary-400"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19 4V10M19 10C17.8954 10 17 10.8954 17 12C17 13.1046 17.8954 14 19 14M19 10C20.1046 10 21 10.8954 21 12C21 13.1046 20.1046 14 19 14M19 14V20M12 4V16M12 16C10.8954 16 10 16.8954 10 18C10 19.1046 10.8954 20 12 20C13.1046 20 14 19.1046 14 18C14 16.8954 13.1046 16 12 16ZM5 8V20M5 8C6.10457 8 7 7.10457 7 6C7 4.89543 6.10457 4 5 4C3.89543 4 3 4.89543 3 6C3 7.10457 3.89543 8 5 8Z"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
        />
      </svg>
    </section>
    
<!-- Section: Recipe of the Week -->
    <section class="w-full flex flex-col my-4 p-4 relative">
      <h2 class="text-md text-white my-2">
        Recipe of the Week
      </h2>
      
<!-- Element: Spotlight -->
      <div class="absolute size-64 bg-white rounded-full blur-3xl -z-10 bottom-0 -translate-y-1/4 left-1/2 -translate-x-1/2" />
      
<!-- Element: Recipe OTW Display -->
      <div class="w-full flex justify-center my-4">
        <div class="w-3/4 h-[450px] bg-gradient-to-t from-background-400 to-background-300 
          rounded-lg shadow-black shadow-md flex flex-col items-start justify-end p-4 text-white">
          <h3 class="text-lg overflow-hidden whitespace-nowrap text-ellipsis w-full font-semibold">
            Avacado Toast
          </h3>

          <p class="text-sm overflow-hidden text-white [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-sm italic text-background-100 mt-2">
            Breakfast - 10 min
          </p>

          <div class="w-full flex justify-center mt-4">
            <button class="w-full py-3 bg-gradient-to-t from-background-300 to-background-200 rounded-lg shadow-sm shadow-black">
              Make Now!
            </button>
          </div>
        </div>
      </div>
    </section>
    
<!-- Section: Viewed Recently -->
    <section class="w-full flex flex-col my-4 p-4">
      <h2 class="text-md text-white my-2">
        Recently viewed
      </h2>
      
<!-- List: Recent Views-->
      <div class="overflow-x-auto whitespace-nowrap">
        <ul class="inline-flex space-x-4">
          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
              Avacado Toast
            </p>

            <p class="text-xs italic text-background-100">
              Breakfast
            </p>

            <div class="flex items-center justify-between w-full text-xs">
              <p>10 min</p>
              <svg
                class="h-6 text-white"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <!-- Hollow -->
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <!-- Filled -->
                <!-- <path -->
                <!--   d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z" -->
                <!--   fill="currentColor" -->
                <!-- /> -->
              </svg>
            </div>
          </li>

          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
              Fried Chicken
            </p>

            <p class="text-xs italic text-background-100">
              Dinner
            </p>

            <div class="flex items-center justify-between w-full text-xs">
              <p>90 min</p>
              <svg
                class="h-6 text-white"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <!-- Hollow -->
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <!-- Filled -->
                <!-- <path -->
                <!--   d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z" -->
                <!--   fill="currentColor" -->
                <!-- /> -->
              </svg>
            </div>
          </li>

          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
              Steak & Eggs
            </p>

            <p class="text-xs italic text-background-100">
              Breakfast
            </p>

            <div class="flex items-center justify-between w-full text-xs">
              <p>15 min</p>
              <svg
                class="h-6 text-red-500"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <!-- Hollow -->
                <!-- <path -->
                <!--   fill-rule="evenodd" -->
                <!--   clip-rule="evenodd" -->
                <!--   d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z" -->
                <!--   stroke="currentColor" -->
                <!--   stroke-width="2" -->
                <!--   stroke-linecap="round" -->
                <!--   stroke-linejoin="round" -->
                <!-- /> -->
                <!-- Filled -->
                <path
                  d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
                  fill="currentColor"
                />
              </svg>
            </div>
          </li>
        </ul>
      </div>
    </section>
    
<!-- Section: Make Again -->
    <section class="w-full flex flex-col my-4 p-4">
      <h2 class="text-md text-white my-2">
        Make again
      </h2>
      
<!-- List: Recent Recipes -->
      <div class="overflow-x-auto whitespace-nowrap">
        <ul class="inline-flex space-x-4">
          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
              Avacado Toast
            </p>

            <p class="text-xs italic text-background-100">
              Breakfast
            </p>

            <div class="flex items-center justify-between w-full text-xs">
              <p>10 min</p>
              <svg
                class="h-6 text-red-500"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <!-- Hollow -->
                <!-- <path -->
                <!--   fill-rule="evenodd" -->
                <!--   clip-rule="evenodd" -->
                <!--   d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z" -->
                <!--   stroke="currentColor" -->
                <!--   stroke-width="2" -->
                <!--   stroke-linecap="round" -->
                <!--   stroke-linejoin="round" -->
                <!-- /> -->
                <!-- Filled -->
                <path
                  d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
                  fill="currentColor"
                />
              </svg>
            </div>
          </li>

          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
              Fried Chicken
            </p>

            <p class="text-xs italic text-background-100">
              Dinner
            </p>

            <div class="flex items-center justify-between w-full text-xs">
              <p>90 min</p>
              <svg
                class="h-6 text-white"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <!-- Hollow -->
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <!-- Filled -->
                <!-- <path -->
                <!--   d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z" -->
                <!--   fill="currentColor" -->
                <!-- /> -->
              </svg>
            </div>
          </li>

          <li class="flex-shrink-0 w-40 h-40 bg-gradient-to-t from-background-400 to-background-300 
            rounded-lg text-white shadow-black shadow-md flex flex-col items-start justify-end p-2">
            <p class="overflow-hidden whitespace-nowrap text-ellipsis w-full">
              Steak & Eggs
            </p>

            <p class="text-xs italic text-background-100">
              Breakfast
            </p>

            <div class="flex items-center justify-between w-full text-xs">
              <p>15 min</p>
              <svg
                class="h-6 text-white"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <!-- Hollow -->
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <!-- Filled -->
                <!-- <path -->
                <!--   d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z" -->
                <!--   fill="currentColor" -->
                <!-- /> -->
              </svg>
            </div>
          </li>
        </ul>
      </div>
    </section>
    
<!-- Section: Recipe to Share Section -->
    <section class="w-full my-8 p-4">
      <div class="bg-gradient-to-tr from-primary-700 to-primary-600 rounded-lg px-8 py-12 text-center shadow-xl">
        <h2 class="text-2xl font-bold text-white mb-4">Got a Recipe to Share?</h2>
        <p class="text-white text-lg leading-relaxed mb-6">
          Unleash your inner chef! Share your unique recipes with our community and inspire others with your culinary genius.
        </p>
        <button class="inline-block px-10 py-4 bg-white text-primary-700 font-bold text-lg rounded-full shadow-lg">
          Create Now!
        </button>
      </div>
    </section>
  </div>
</div>