{% extends 'base.html' %}
{% load static %}

{% block title %}About Us - PixelMinds{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h1 class="section-title">About PixelMinds</h1>
                <p class="lead">We are a team of passionate developers, designers, and healthcare professionals dedicated to helping you live a healthier, happier life.</p>
            </div>
        </div>
    </div>
</div>

<div class="section bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2>Our Mission</h2>
                <p>Our mission is to make mental and physical health tracking simple, accessible, and insightful for everyone. We believe that technology can empower individuals to take control of their well-being by providing them with the right tools and data-driven guidance.</p>
                <p>We leverage cutting-edge AI to provide you with personalized insights and recommendations based on your mood and activity data. By understanding your patterns, you can make informed decisions to improve your well-being.</p>
            </div>
            <div class="col-md-6 text-center">
                <img src="https://via.placeholder.com/500x300.png/E0E7FF/4F46E5?text=Health+Innovation" class="img-fluid rounded shadow" alt="Health Innovation">
            </div>
        </div>
    </div>
</div>

<div class="section">
    <div class="container">
        <div class="text-center mb-5">
            <h2>Meet the Team</h2>
            <p class="lead">A small group with a big vision.</p>
        </div>
        <div class="row text-center">
            <div class="col-md-4 mb-4">
                <img src="https://via.placeholder.com/150.png/E0E7FF/4F46E5?text=AV" class="rounded-circle mb-3" alt="Team Member">
                <h5>Alex Vance</h5>
                <p class="text-muted">Lead Developer</p>
            </div>
            <div class="col-md-4 mb-4">
                <img src="https://via.placeholder.com/150.png/E0E7FF/4F46E5?text=BS" class="rounded-circle mb-3" alt="Team Member">
                <h5>Brenda Shaw</h5>
                <p class="text-muted">UX Designer</p>
            </div>
            <div class="col-md-4 mb-4">
                <img src="https://via.placeholder.com/150.png/E0E7FF/4F46E5?text=CD" class="rounded-circle mb-3" alt="Team Member">
                <h5>Dr. Carlin Day</h5>
                <p class="text-muted">Health Advisor</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}