{% extends 'website/home/base.html' %}
{% load static %}
{% block title %} Akmam Shop | Smart Ecommerce in Bangladesh {% endblock %}

{% block content %}

<!-- Hero Section -->
<section class="py-5 bg-light text-center">
  <div class="container">
    <h1 class="fw-bold">About Us</h1>
    <p class="text-muted">Who we are & what we do</p>
  </div>
</section>

<!-- About Section -->
<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 mb-4 mb-md-0">
        <img src="{% static 'img/about.jpg' %}" alt="About us" class="img-fluid rounded shadow">
      </div>
      <div class="col-md-6">
        <h2 class="fw-bold mb-3">Welcome to Our Store</h2>
        <p class="text-muted">
          We are dedicated to providing the best quality products at affordable prices. 
          Our mission is to deliver value and satisfaction to our customers by focusing 
          on innovation, trust, and excellent customer service.
        </p>
        <p class="text-muted">
          Since our beginning, we have grown into a trusted brand with thousands of 
          happy customers. Every product we sell goes through strict quality checks 
          to ensure only the best for you.
        </p>
        <a href="/contact" class="btn btn-danger mt-3">Contact Us</a>
      </div>
    </div>
  </div>
</section>

<!-- Mission, Vision, Values -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="section-title text-center mb-5">
      <h2 class="fw-bold">Our Mission & Values</h2>
      <p class="text-muted">What drives us every day</p>
    </div>
    <div class="row g-4">
      <div class="col-md-4 text-center">
        <div class="p-4 h-100 shadow-sm rounded bg-white">
          <i class="fa-solid fa-bullseye fa-2x text-danger mb-3"></i>
          <h5 class="fw-bold">Our Mission</h5>
          <p class="text-muted">To deliver high-quality products that enrich your lifestyle and bring you joy.</p>
        </div>
      </div>
      <div class="col-md-4 text-center">
        <div class="p-4 h-100 shadow-sm rounded bg-white">
          <i class="fa-solid fa-eye fa-2x text-danger mb-3"></i>
          <h5 class="fw-bold">Our Vision</h5>
          <p class="text-muted">To become a trusted name in e-commerce with excellence in customer satisfaction.</p>
        </div>
      </div>
      <div class="col-md-4 text-center">
        <div class="p-4 h-100 shadow-sm rounded bg-white">
          <i class="fa-solid fa-heart fa-2x text-danger mb-3"></i>
          <h5 class="fw-bold">Our Values</h5>
          <p class="text-muted">Integrity, trust, and commitment towards our customers and partners.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Team Section -->
<section class="py-5">
  <div class="container">
    <div class="section-title text-center mb-5">
      <h2 class="fw-bold">Meet Our Team</h2>
      <p class="text-muted">Passionate people behind our success</p>
    </div>
    <div class="row g-4">
      <div class="col-md-4 text-center">
        <img src="{% static 'img/team1.jpg' %}" alt="Team Member" class="rounded-circle mb-3" width="120" height="120">
        <h6 class="fw-bold">John Doe</h6>
        <p class="text-muted">Founder & CEO</p>
      </div>
      <div class="col-md-4 text-center">
        <img src="{% static 'img/team2.jpg' %}" alt="Team Member" class="rounded-circle mb-3" width="120" height="120">
        <h6 class="fw-bold">Jane Smith</h6>
        <p class="text-muted">Marketing Head</p>
      </div>
      <div class="col-md-4 text-center">
        <img src="{% static 'img/team3.jpg' %}" alt="Team Member" class="rounded-circle mb-3" width="120" height="120">
        <h6 class="fw-bold">Robert Brown</h6>
        <p class="text-muted">Operations Manager</p>
      </div>
    </div>
  </div>
</section>
 

{% endblock %}