{% extends "base.html" %}

{% block aboveNavbar %}

<div
  class="hero min-h-screen"
  style="background-image: url(https://images.unsplash.com/photo-1558018754-1f1b019ece9d?q=80&w=1227&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);"
>
  <div class="hero-overlay"></div>
  <div class="hero-content text-neutral-content text-center">
    <div class="max-w-md">
      <h1 class="mb-5 text-5xl font-bold">Hello there</h1>
      <p class="mb-5">
        Welcome to WishThat. The place to create and share wishlists online. 
      </p>
      <button class="btn btn-primary" onclick="content.scrollIntoView({ behavior: 'smooth', block: 'end' })">Learn more</button>
    </div>
  </div>
</div>

{% endblock aboveNavbar %}

{% block content %}
<main class="w-full h-full px-20 pt-5 flex flex-col" id="content">
    <h2 class="text-3xl font-bold mb-5">Why Use Wishthat?</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="card bg-base-100 shadow-md flex flex-col">
            <div class="card-body">
                <h3 class="card-title">Avoid Duplicate Purchases</h3>
                <p>Our system helps you keep track of what has been purchased, ensuring that you don't buy the same item twice.</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow-md flex flex-col">
            <div class="card-body">
                <h3 class="card-title">No Account Needed</h3>
                <p>Start creating wishlists immediately without the hassle of signing up or logging in.</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow-md flex flex-col">
            <div class="card-body">
                <h3 class="card-title">Price and Image Scraping</h3>
                <p>We scrape websites for the latest prices and images, making sure you don't have to painstakingly create wish items manually!</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow-md flex flex-col">
            <div class="card-body">
                <h3 class="card-title">Easy to Use</h3>
                <p>Our user-friendly interface allows you to create and manage your wishlists effortlessly.</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow-md flex flex-col">
            <div class="card-body">
                <h3 class="card-title">Fully Open Source</h3>
                <p>Wishthat is fully open-source and FOSS, allowing anyone to check our security.</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow-md flex flex-col">
            <div class="card-body">
                <h3 class="card-title">Mobile friendly design</h3>
                <p>The software has been designed with mobile friendlyness in mind. Meaning that your phone addicted friends may enjoy this site as well.</p>
            </div>
        </div>
    </div>

    <span class="flex-grow"></span>

    <footer class="footer footer-center p-10 bg-base-100 text-base-content">
        <div>
            <p>© 2025 jsw. All rights reserved.</p>
        </div>
    </footer>
</main>

{% endblock content %}