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

{% block title %}درباره طراح{% endblock %}

{% block extra_css %}
<style>
.hero-section{
    margin-top: 80px;
    text-align: center;
}

.hero-section img{
    width: 100%;
     height: auto;
    display: block;
    margin: 0 auto;
}

.btn-group-custom{
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.btn-outline-light-custom{
    width: 220px;
    padding: 12px 20px;
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.7);
    background: transparent;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: all .3s ease;
}

.btn-outline-light-custom:hover{
    border-color: rgba(255,255,255,.5);
    color: #fff;
    background: rgba(255,255,255,.05);
}

@media (max-width: 767px){
    .hero-section img{
        width: 100%;
    }

    .btn-outline-light-custom{
        width: 100%;
        max-width: 500px;
    }
}

h1{
  margin-top: 10px;
  color: white;
  font-size: 20px;
  
}
h2{
  color: rgba(240, 248, 255, 0.333);
  font-size: 14px;
}
.hero-section img{
    width: 100% !important;
    height: 200px !important;
    border-radius: 10px;
 
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.15);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.btn-outline-light-custom{
    width: 100%;
    max-width: 500px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: .3s;
}

.btn-outline-light-custom:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.3);
}
h1{
    margin-top: 20px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

h2{
    color: rgba(255,255,255,.6);
    font-size: 15px;
    margin-bottom: 25px;
}

 
.hero-section{
    margin-top: 40px;
    text-align: center;
}
@media (min-width: 768px) {
.hero-section img{
    width: 500px !important;
    height: 200px !important;
    border-radius: 10px;
 
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.15);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}}
</style>
{% endblock %}

{% block content %}
<main class="container my-5">

    <div class="hero-section">
        <img src="{% static 'images/k.jpg' %}" alt="درباره طراح" style="width: 200px; height: 200px;">
        <h1 style="font-size: 18px;">کربلایی امین قدیم</h1>
        <h2>آدرس صفحات رسمی ما</h2>

        <div class="btn-group-custom">
 
    <a href="{% url 'home' %}" class="btn-outline-light-custom">
        <i class="fa-solid fa-globe"></i>
        <span>وب‌سایت</span>
    </a>

    <a href="https://www.instagram.com/amin_ghadim?igsh=Znd0azYwdm90d2d1" class="btn-outline-light-custom">
        <i class="fa-brands fa-instagram"></i>
        <span>اینستاگرام</span>
    </a>

    <a href="https://youtube.com/@aminghadim?si=HRHaKkgH34pEDDvu" class="btn-outline-light-custom">
        <i class="fa-brands fa-youtube"></i>
        <span>یوتیوب</span>
    </a>
  <a href="https://t.me/amin_ghadim313" class="btn-outline-light-custom">
        <i class="fa-brands fa-telegram"></i>
        <span>تلگرام</span>
    </a>
      <a href="https://www.aparat.com/Amin.ghadim" class="btn-outline-light-custom">
<i class="fa-solid fa-clapperboard"></i>
        <span>آپارات</span>
    </a>
    <a href="https://eitaa.com/amin_ghadim_org" class="btn-outline-light-custom">
        <i class="fa-solid fa-envelope-open-text"></i>
        <span>ایتا</span>
    </a>

    <a href="https://ble.ir/amin_ghadim313" class="btn-outline-light-custom">
        <i class="fa-solid fa-comment-dots"></i>
        <span>بله</span>
    </a>

    <a href="https://rubika.ir/aminghadim128" class="btn-outline-light-custom">
        <i class="fa-solid fa-message"></i>
        <span>روبیکا</span>
    </a>

    <a href="tel:09107800921" class="btn-outline-light-custom">
        <i class="fa-solid fa-phone"></i>
        <span>تماس</span>
    </a>
 
 

        </div>
    </div>

</main>
{% endblock %}