{% extends "base.html" %}

{% block title %}TexLab - Professional LaTeX Converter{% endblock %}

{% block content %}
<div class="page-header">
  <h1 class="page-title">Transform Images to LaTeX Instantly</h1>
  <p class="page-subtitle">
    Our powerful AI-powered platform converts mathematical equations, handwritten notes, 
    camera captures, and tables into clean, editable LaTeX code with unmatched accuracy.
  </p>
</div>

<div class="row g-4">
  <div class="col-md-6 col-lg-4">
    <div class="feature-card text-center h-100">
      <div class="feature-icon" style="background: rgba(67, 97, 238, 0.1); color: #4361ee;">
        <i class="fas fa-square-root-alt"></i>
      </div>
      <h3 class="feature-title">Math Equations</h3>
      <p class="feature-description">
        Upload images of printed or handwritten mathematical equations and get precise LaTeX code.
      </p>
      <a href="/math" class="btn btn-primary-gradient">
        Convert Now <i class="fas fa-arrow-right ms-2"></i>
      </a>
    </div>
  </div>


 <div class="col-md-6 col-lg-4">
    <div class="feature-card text-center h-100">
      <div class="feature-icon" style="background: rgba(76, 201, 240, 0.1); color: #4cc9f0;">
        <i class="fas fa-camera"></i>
      </div>
      <h3 class="feature-title">Capture Math Equations</h3>
      <p class="feature-description">
        Take a photo of any equation with your device's camera and convert it to LaTeX in real-time.
      </p>
      <a href="/camera" class="btn btn-accent-gradient">
        Capture Now <i class="fas fa-arrow-right ms-2"></i>
      </a>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="feature-card text-center h-100">
      <div class="feature-icon" style="background: rgba(247, 37, 133, 0.1); color: #f72585;">
        <i class="fas fa-pen-fancy"></i>
      </div>
      <h3 class="feature-title">Handwritten Notes</h3>
      <p class="feature-description">
        Draw your equations directly on our digital canvas and convert them to LaTeX instantly.
      </p>
      <a href="/scribble" class="btn btn-secondary-gradient">
        Start Drawing <i class="fas fa-arrow-right ms-2"></i>
      </a>
    </div>
  </div>

 

  <div class="col-md-6 col-lg-4">
    <div class="feature-card text-center h-100">
      <div class="feature-icon" style="background: rgba(133, 221, 238, 0.1); color: #85ddee;">
        <i class="fas fa-table"></i>
      </div>
      <h3 class="feature-title">Table Detection</h3>
      <p class="feature-description">
        Automatically detect handwritten tables and convert them to perfectly formatted LaTeX tables.
      </p>
      <a href="/table" class="btn btn-dark-gradient">
        Detect Tables <i class="fas fa-arrow-right ms-2"></i>
      </a>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="feature-card text-center h-100">
      <div class="feature-icon" style="background: rgba(67, 97, 238, 0.1); color: #4361ee;">
        <i class="fas fa-file-pdf"></i>
      </div>
      <h3 class="feature-title">PDFly Converter</h3>
      <p class="feature-description">
        Upload PDFs and use Converto to highlight areas for instant LaTeX conversion.
      </p>
      <a href="/pdffly" class="btn btn-primary-gradient">
        Try PDFly <i class="fas fa-arrow-right ms-2"></i>
      </a>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="feature-card text-center h-100">
      <div class="feature-icon" style="background: rgba(58, 12, 163, 0.1); color: #3a0ca3;">
        <i class="fas fa-chart-line"></i>
      </div>
      <h3 class="feature-title">Graph & Plot Generator</h3>
      <p class="feature-description">
        Generate beautiful mathematical graphs and plots from simple text commands.
      </p>
      <a href="/graph" class="btn btn-dark-gradient">
        Create Graph <i class="fas fa-arrow-right ms-2"></i>
      </a>
    </div>
  </div>

</div>

{% endblock %}
{% block extra_css %}
<style>
  footer {
  width: 100%;
  background-color: #1e293b;
  color: white;
  padding: 3rem 1rem;
  box-sizing: border-box;
}

  .feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.8rem;
  }
  
  @media (max-width: 768px) {
    .page-title {
      font-size: 1.8rem;
    }
    
    .page-subtitle {
      font-size: 1rem;
    }
    
    .col-md-6.col-lg-4 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  
</style>
{% endblock %}