sure/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 Sure 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 Sure.  You won't need to enter payment details.
    </p>

    <div class="w-full">
      <% if Current.family.can_start_trial? %>
        <%= render DS::Button.new(
        text: "Try Sure for 14 days",
        href: subscription_path,
        full_width: true,
        data: { turbo: false }
      ) %>
      <% elsif Current.family.trialing? %>
        <%= render DS::Link.new(
          text: "Continue trial",
          href: root_path,
          full_width: true,
        ) %>
      <% else %>
        <%= render DS::Link.new(
          text: "Upgrade",
          href: upgrade_subscription_path,
          full_width: true,
        ) %>
      <% end %>
    </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 DS::FilledIcon.new(icon: "unlock-keyhole", variant: :inverse) %>
        <%= render DS::FilledIcon.new(icon: "bell", variant: :inverse) %>
        <%= render DS::FilledIcon.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 Sure 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 Sure</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 DS::FilledIcon.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 DS::FilledIcon.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 DS::FilledIcon.new(icon: "chart-line", 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 DS::FilledIcon.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 gap-4 items-center">
        <%= render "chats/ai_avatar" %>
        <p class="text-sm text-primary text-center">Unlimited access and chats with Sure AI</p>
      </div>

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