<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">Contact Us</h1>
      <p class="text-xl text-gray-600">Get in touch with the Raxol team</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <div class="bg-white rounded-lg shadow-lg p-8">
        <h2 class="text-2xl font-semibold text-gray-800 mb-6">Send us a message</h2>
        
        <form class="space-y-6">
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
            <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
          </div>

          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
            <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
          </div>

          <div>
            <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
            <input type="text" id="subject" name="subject" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
          </div>

          <div>
            <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
            <textarea id="message" name="message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
          </div>

          <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            Send Message
          </button>
        </form>
      </div>

      <div class="bg-white rounded-lg shadow-lg p-8">
        <h2 class="text-2xl font-semibold text-gray-800 mb-6">Get in touch</h2>
        
        <div class="space-y-6">
          <div class="flex items-start">
            <div class="text-blue-600 text-xl mr-4">📧</div>
            <div>
              <h3 class="font-semibold text-gray-800">Email</h3>
              <p class="text-gray-600">support@raxol.io</p>
            </div>
          </div>

          <div class="flex items-start">
            <div class="text-blue-600 text-xl mr-4">🌐</div>
            <div>
              <h3 class="font-semibold text-gray-800">Website</h3>
              <p class="text-gray-600">https://github.com/hydepwns/raxol</p>
            </div>
          </div>

          <div class="flex items-start">
            <div class="text-blue-600 text-xl mr-4">📚</div>
            <div>
              <h3 class="font-semibold text-gray-800">Documentation</h3>
              <p class="text-gray-600">https://hexdocs.pm/raxol</p>
            </div>
          </div>

          <div class="flex items-start">
            <div class="text-blue-600 text-xl mr-4">💬</div>
            <div>
              <h3 class="font-semibold text-gray-800">Community</h3>
              <p class="text-gray-600">Join our Discord server</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 