minne/templates/index/hero.html

<main class="hero grow flex justify-center ">
  <div class="container hero-content text-center">
    <div class="space-y-8">
      <!-- Hero Section -->
      <h1
        class="text-5xl sm:text-6xl py-4 pt-10 font-extrabold bg-linear-to-r from-primary to-secondary text-transparent bg-clip-text font-satoshi">
        Your Second Brain, Built to Remember
        <div class="text-xl font-light mt-4">
          Minne <span class="text-base-content opacity-70">/ˈmɪnɛ/ [Swedish: memory]</span>
        </div>
      </h1>
      <p class="text-xl ">
        Capture, connect, and retrieve your knowledge effortlessly with Minne
      </p>

      <!-- Features Grid -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-12">
        <div class="card bg-base-100 shadow-hover">
          <div class="card-body items-center">
            <div class="skeleton h-32 w-32 rounded-full"></div>
            <h3 class="card-title text-xl">Easy Capture</h3>
            <p>Save anything instantly - texts, links, images, and more</p>
          </div>
        </div>
        <div class="card bg-base-100 shadow-hover">
          <div class="card-body items-center">
            <div class="skeleton h-32 w-32 rounded-full"></div>
            <h3 class="card-title text-xl">Smart Analysis</h3>
            <p>AI-powered content analysis and organization</p>
          </div>
        </div>
        <div class="card bg-base-100 shadow-hover">
          <div class="card-body items-center">
            <div class="skeleton h-32 w-32 rounded-full"></div>
            <h3 class="card-title text-xl">Knowledge Graph</h3>
            <p>Visualize connections between your ideas</p>
          </div>
        </div>
      </div>

      <!-- CTA -->
      <div class="space-y-4">
        <div class="flex justify-center gap-4">
          <a class="btn btn-primary btn-lg" hx-boost="true" href="/signup">Get Started</a>
          <a class="btn btn-outline btn-lg" hx-boost="true" href="/documentation">Learn More</a>
        </div>
      </div>

    </div>
  </div>
</main>