<div class="bg-white rounded-2xl shadow-xl p-8">
  <div class="text-center mb-8">
    <h2 class="text-3xl font-bold text-gray-900">Create Your Property Website</h2>
    <p class="mt-2 text-gray-600">Get started in just a few minutes</p>
  </div>

  <%= form_tag signup_start_path, method: :post, class: "space-y-6" do %>
    <div>
      <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
        Email Address
      </label>
      <input
        type="email"
        name="email"
        id="email"
        required
        autofocus
        placeholder="you@example.com"
        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-lg"
      >
      <p class="mt-2 text-sm text-gray-500">
        We'll use this to set up your account
      </p>
    </div>

    <button
      type="submit"
      class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg font-semibold text-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
    >
      Get Started
    </button>
  <% end %>

  <div class="mt-8 pt-6 border-t text-center">
    <p class="text-sm text-gray-500">
      Already have an account?
      <%= link_to "Sign in", new_user_session_path, class: "text-indigo-600 hover:text-indigo-500 font-medium" %>
    </p>
  </div>
</div>

<div class="mt-8 text-center">
  <h3 class="text-lg font-semibold text-gray-800 mb-4">What you'll get:</h3>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm text-gray-600">
    <div class="bg-white/50 rounded-lg p-4">
      <div class="text-2xl mb-2">&#127968;</div>
      <div class="font-medium">Property Listings</div>
      <div class="text-gray-500">Showcase your properties</div>
    </div>
    <div class="bg-white/50 rounded-lg p-4">
      <div class="text-2xl mb-2">&#127760;</div>
      <div class="font-medium">Your Own Subdomain</div>
      <div class="text-gray-500">yourname.propertywebbuilder.com</div>
    </div>
    <div class="bg-white/50 rounded-lg p-4">
      <div class="text-2xl mb-2">&#128640;</div>
      <div class="font-medium">Ready in Minutes</div>
      <div class="text-gray-500">Pre-configured and ready to use</div>
    </div>
  </div>
</div>
