{% extends "base.html" %}

{% block content %}
<div class="container mx-auto px-4 mt-10">
    <!-- Hero section -->
    <div class="bg-blue-600 text-white py-20 rounded-lg shadow-lg">
        <h1 class="text-4xl font-bold mb-4">Welcome to TraceHound Analysis Tool</h1>
        <p class="text-xl">Your solution for sensitive data analysis using NLP.</p>
    </div>

    <!-- About Us section -->
    <div class="mt-12">
        <h2 class="text-2xl font-bold mb-6">About Us</h2>
        <p>Your organization's history, mission, vision, and values. Talk about your team, your journey, and what makes you special in the market.</p>
    </div>

    <!-- Features section -->
    <div class="mt-12">
        <h2 class="text-2xl font-bold mb-6">Features</h2>
        <!-- [Features Content] -->
    </div>

    <!-- Our Services section -->
    <div class="mt-12">
        <h2 class="text-2xl font-bold mb-6">Our Services</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
            <!-- Service 1 -->
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h3 class="text-xl font-semibold mb-4">Service 1</h3>
                <p>Description of this service. Highlight its importance and how it can help clients.</p>
            </div>
            <!-- Service 2 -->
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h3 class="text-xl font-semibold mb-4">Service 2</h3>
                <p>Brief about this service and its unique selling points.</p>
            </div>
            <!-- More services as needed -->
        </div>
    </div>

    <!-- Testimonials Section -->
    <div class="mt-12">
        <h2 class="text-2xl font-bold mb-6">What Our Clients Say</h2>
        <!-- Testimonial 1 -->
        <div class="bg-white p-6 rounded-lg shadow-lg mb-6">
            <p>"Tracehound se suma a la revolucion de los procesos de clasificación de datos y la identificación de riesgos inherentes en conjuntos de datos"</p>
            <p>- Happy Customer</p>
        </div>
        <!-- More testimonials as needed -->
    </div>

    <!-- CTA Section -->
    <div class="bg-blue-100 p-10 mt-12 rounded-lg shadow-inner">
        <!-- [CTA Content] -->
    </div>

    <!-- Footer -->
    <footer class="mt-12 py-8 bg-blue-600 text-white">
        <div class="flex justify-between">
            <!-- Company Details -->
            <div>
                <h3 class="text-2xl font-bold">Your Company Name</h3>
                <p>Address, City, Zip</p>
                <p>Email: example@example.com</p>
                <p>Phone: +1-234-567-890</p>
            </div>

            <!-- Social Links or Quick Links -->
            <div>
                <h3 class="text-2xl font-bold mb-4">Follow Us</h3>
                <ul>
                    <li><a href="#" class="hover:text-blue-400">Facebook</a></li>
                    <li><a href="#" class="hover:text-blue-400">Twitter</a></li>
                    <!-- Add more social links -->
                </ul>
            </div>
        </div>
    </footer>
</div>
{% endblock %}