Maybe/app/views/onboardings/trial.html.erb

<%= content_for :previous_path, goals_onboarding_path %>

<%= content_for :header_nav do %>
  <%= render "onboardings/onboarding_nav", user: @user %>
<% end %>

<%= content_for :cancel_action do %>
  <%= render "onboardings/logout" %>
<% end %>

<%= content_for :footer do %>
  <%= render "layouts/shared/footer" %>
<% end %>

<div class="grow flex flex-col gap-12 items-center justify-center">
  <div class="max-w-sm mx-auto flex flex-col items-center">
    <%= image_tag "logo-color.png", class: "w-16 mb-6" %>

    <p class="text-xl lg:text-3xl text-primary font-display font-medium">
      Try Maybe for 14 days.
    </p>

    <h2 class="text-xl lg:text-3xl font-display text-secondary font-medium mb-2">
      No credit card required
    </h2>

    <p class="text-sm text-secondary text-center mb-8">
      Starting the trial activates your account for Maybe.  You won't need to enter payment details.
    </p>

    <div class="w-full">
      <%= render ButtonComponent.new(
        text: "Try Maybe for 14 days",
        href: start_trial_subscription_path,
        full_width: true
      ) %>
    </div>
  </div>

  <div class="space-y-8">
    <h2 class="text-center text-lg lg:text-2xl font-medium text-primary">How your trial will work</h2>

    <div class="flex gap-3">
      <div class="rounded-xl p-1 bg-gray-400/20 theme-dark:bg-gray-500/20 flex flex-col justify-between items-center text-secondary">
        <%= render FilledIconComponent.new(icon: "unlock-keyhole", variant: :inverse) %>
        <%= render FilledIconComponent.new(icon: "bell", variant: :inverse) %>
        <%= render FilledIconComponent.new(icon: "credit-card", variant: :inverse) %>
      </div>

      <div class="space-y-12">
        <div class="space-y-1.5 text-sm">
          <p class="text-primary font-medium">Today</p>
          <p class="text-secondary">You'll get free access to Maybe for 14 days</p>
        </div>

        <div class="space-y-1.5 text-sm">
          <p class="text-primary font-medium">In 13 days (<%= 13.days.from_now.strftime("%B %d") %>)</p>
          <p class="text-secondary">We'll notify you to remind you when your trial will end.</p>
        </div>

        <div class="space-y-1.5 text-sm">
          <p class="text-primary font-medium">In 14 days (<%= 14.days.from_now.strftime("%B %d") %>)</p>
          <p class="text-secondary">Your trial ends &mdash; subscribe to continue using Maybe</p>
        </div>
      </div>
    </div>
  </div>

  <div class="space-y-8 max-w-2xl mx-auto">
    <h2 class="text-center text-lg lg:text-2xl font-medium text-primary">Here's what's included</h2>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-x-12 gap-y-6 text-secondary">
      <div class="flex flex-col gap-4 items-center">
        <%= render FilledIconComponent.new(icon: "landmark", variant: :surface) %>
        <p class="text-sm text-primary text-center">More than 10,000 institutions to connect to</p>
      </div>

      <div class="flex flex-col gap-4 items-center">
        <%= render FilledIconComponent.new(icon: "layers", variant: :surface) %>
        <p class="text-sm text-primary text-center">Connect unlimited accounts and account types</p>
      </div>

      <div class="flex flex-col gap-4 items-center">
        <%= render FilledIconComponent.new(icon: "line-chart", variant: :surface) %>
        <p class="text-sm text-primary text-center">Performance and investment returns across portfolio</p>
      </div>

      <div class="flex flex-col gap-4 items-center">
        <%= render FilledIconComponent.new(icon: "credit-card", variant: :surface) %>
        <p class="text-sm text-primary text-center">Comprehensive transaction tracking experience</p>
      </div>

      <div class="flex flex-col items-center">
        <div class="pl-2">
          <%= render "chats/ai_avatar" %>
        </div>
        <p class="text-sm text-primary text-center">Unlimited access and chats with Maybe AI</p>
      </div>

      <div class="flex flex-col gap-4 items-center">
        <%= render FilledIconComponent.new(icon: "keyboard", variant: :surface) %>
        <p class="text-sm text-primary text-center">Manual account tracking that works well</p>
      </div>

      <div class="flex flex-col gap-4 items-center">
        <%= render FilledIconComponent.new(icon: "globe-2", variant: :surface) %>
        <p class="text-sm text-primary text-center">Multiple currencies and near global coverage</p>
      </div>

      <div class="flex flex-col gap-4 items-center">
        <%= render FilledIconComponent.new(icon: "ship", variant: :surface) %>
        <p class="text-sm text-primary text-center">Early access to newly released features</p>
      </div>

      <div class="flex flex-col gap-4 items-center">
        <%= render FilledIconComponent.new(icon: "messages-square", variant: :surface) %>
        <p class="text-sm text-primary text-center">Priority human support from team</p>
      </div>
    </div>
  </div>
</div>