{% extends 'base.html' %}
{% block title %}About · TradeHub{% endblock %}

{% block content %}
<div class="container" style="max-width: 720px; padding-top: var(--space-10);">
  <h1 style="font-size: 2.5rem; margin-bottom: var(--space-4);">About TradeHub</h1>
  <p style="font-size: 1.125rem; color: var(--color-text-muted); line-height: 1.7;">
    TradeHub is a student-focused C2C marketplace. Buy and sell textbooks, electronics,
    furniture, clothing, and anything else you need — safely, quickly, and at a fair price.
  </p>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin: var(--space-10) 0;">
    <div class="form-card" style="padding: var(--space-6);">
      <i data-lucide="zap" width="28" height="28" style="color: var(--color-primary); margin-bottom: var(--space-3);"></i>
      <h3>Fast</h3>
      <p class="text-sm text-muted">List an item in under a minute with our streamlined wizard.</p>
    </div>
    <div class="form-card" style="padding: var(--space-6);">
      <i data-lucide="shield-check" width="28" height="28" style="color: var(--color-accent); margin-bottom: var(--space-3);"></i>
      <h3>Trusted</h3>
      <p class="text-sm text-muted">Star ratings and reviews help build a reliable community.</p>
    </div>
    <div class="form-card" style="padding: var(--space-6);">
      <i data-lucide="message-circle" width="28" height="28" style="color: var(--color-info); margin-bottom: var(--space-3);"></i>
      <h3>Connected</h3>
      <p class="text-sm text-muted">Built-in real-time chat keeps buyers and sellers in sync.</p>
    </div>
  </div>
</div>
{% endblock %}