{% extends 'base.html' %}

{% block title %}About FinSight - Smarter Financial Decisions{% endblock %}

{% block mystyle %}
<style>
    .team-photo {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 50%;
    }
</style>
{% endblock %}

{% block content %}

<!-- Hero Section -->
<div class="container1 text-center py-5">
    <div class="d-flex flex-column justify-content-center align-items-center h-100">
        <h1 class="display-4 font-weight-bold" data-aos="fade-up">About FinSight</h1>
        <p class="lead mt-3" data-aos="fade-up" data-aos-delay="300">
            Empowering individuals and businesses to make smarter financial decisions since day one.
        </p>
    </div>
</div>

<div class="breaker12"></div>

<!-- Mission & Vision Section -->
<div class="container2 py-5">
    <div class="row align-items-center">
        <div class="col-md-6" data-aos="fade-right">
            <h2 class="font-weight-bold">Our Mission</h2>
            <p>
                At FinSight, our mission is to simplify personal finance management, providing tools and insights
                to help individuals and businesses achieve financial clarity and stability. We strive to make
                financial planning accessible and intuitive for everyone.
            </p>
        </div>
        <div class="col-md-6" data-aos="fade-up">
            <img src="{{ url_for('static', filename='images/mission.png') }}" alt="Mission Image" class="img-fluid rounded">
        </div>
    </div>
</div>

<div class="breaker25"></div>

<!-- Team Section -->
<div class="container1 text-center py-5">
    <h2 class="font-weight-bold mb-4" data-aos="fade-up">Meet the Team</h2>
    <p class="mb-5" data-aos="fade-up" data-aos-delay="300">
        Our diverse team of financial experts, data analysts, and tech enthusiasts work together to create FinSight.
    </p>
    <div class="row justify-content-center gy-4">
        <!-- Team Member 1 -->
        <div class="col-md-3 text-center" data-aos="fade-up" data-aos-delay="300">
            <img src="{{ url_for('static', filename='images/team1.png') }}" alt="Team Member 1" class="team-photo mb-3">
            <h5>Sagar Paudel</h5>
            <p class="text-muted">CEO & Founder</p>
        </div>
        <!-- Team Member 2 -->
        <div class="col-md-3 text-center" data-aos="fade-up" data-aos-delay="300">
            <img src="{{ url_for('static', filename='images/team1.png') }}" alt="Team Member 1" class="team-photo mb-3">
            <h5>Sagar Paudel</h5>
            <p class="text-muted">CEO & Founder</p>
        </div>
        <!-- Team Member 3 -->
        <div class="col-md-3 text-center" data-aos="fade-up" data-aos-delay="300">
            <img src="{{ url_for('static', filename='images/team1.png') }}" alt="Team Member 1" class="team-photo mb-3">
            <h5>Sagar Paudel</h5>
            <p class="text-muted">CEO & Founder</p>
        </div>
    </div>
</div>

<div class="breaker14"></div>

<!-- Core Values Section -->
<div class="container2 py-5">
    <h2 class="font-weight-bold text-center mb-5" data-aos="fade-up">Our Core Values</h2>
    <div class="row">
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="300">
            <div class="icon-box p-4 rounded shadow-sm text-center">
                <i class="fas fa-lightbulb fa-4x text-primary mb-3"></i>
                <h4>Innovation</h4>
                <p>Continuously innovating to provide cutting-edge financial tools for our users.</p>
            </div>
        </div>
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="500">
            <div class="icon-box p-4 rounded shadow-sm text-center">
                <i class="fas fa-heart fa-4x text-danger mb-3"></i>
                <h4>Empathy</h4>
                <p>Understanding and addressing the unique financial challenges of our users.</p>
            </div>
        </div>
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="700">
            <div class="icon-box p-4 rounded shadow-sm text-center">
                <i class="fas fa-handshake fa-4x text-success mb-3"></i>
                <h4>Trust</h4>
                <p>Building lasting relationships through transparency and reliability.</p>
            </div>
        </div>
    </div>
</div>

<div class="breaker25"></div>

<!-- Contact CTA Section -->
<div class="container1 text-center py-5">
    <h2 class="font-weight-bold" data-aos="fade-up">Want to Learn More?</h2>
    <p class="mb-4" data-aos="fade-up" data-aos-delay="300">
        Reach out to us or start exploring FinSight today!
    </p>
    <a href="/contact" class="btn btn-primary btn-md" data-aos="fade-up" data-aos-delay="500">Contact Us</a>
</div>

<div class="breaker33"></div>

{% endblock %}