api/templates/main/contact.html.twig

{% extends 'base.html.twig' %}

{% block title %}تماس با ما - سرویس نقشه می‌مپس | پشتیبانی نقشه رستری ایرانی{% endblock %}

{% block description %}تماس با تیم پشتیبانی سرویس نقشه می‌مپس - پشتیبانی 24/7، راهنمایی فنی، سوالات و پیشنهادات. شماره تماس، ایمیل و واتساپ.{% endblock %}

{% block keywords %}تماس با می‌مپس, پشتیبانی نقشه, شماره تماس نقشه, ایمیل نقشه, واتساپ نقشه, پشتیبانی فنی نقشه{% endblock %}

{% block og_title %}تماس با ما - سرویس نقشه می‌مپس{% endblock %}

{% block og_description %}تماس با تیم پشتیبانی سرویس نقشه می‌مپس - پشتیبانی 24/7 و راهنمایی فنی{% endblock %}

{% block body %}
    <!-- Hero Section -->
    <section class="hero-section text-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1 class="display-4 fw-bold mb-4">
                        تماس با ما
                        <span class="d-block">ما اینجا هستیم تا کمک کنیم</span>
                    </h1>
                    <p class="lead mb-4">
                        اگر سوالی دارید یا نیاز به راهنمایی در مورد سرویس نقشه می‌مپس دارید، تیم پشتیبانی ما آماده پاسخگویی به شماست. از طریق روش‌های مختلف با ما در تماس باشید.
                    </p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="tel:02191550290" class="btn btn-light btn-lg">
                            <i class="fas fa-phone me-2"></i>
                            تماس مستقیم
                        </a>
                        <a href="https://wa.me/989183282405" target="_blank" rel="noopener noreferrer" class="btn btn-success btn-lg">
                            <i class="fab fa-whatsapp me-2"></i>
                            واتساپ
                        </a>
                    </div>
                </div>
                <div class="col-lg-6 text-center">
                    <div class="mt-5 mt-lg-0">
                        <div class="bg-white bg-opacity-10 rounded-3 p-4 d-inline-block">
                            <div class="row g-3">
                                <div class="col-4">
                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                        <i class="fas fa-phone fa-2x text-white"></i>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                        <i class="fas fa-envelope fa-2x text-white"></i>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                        <i class="fas fa-map-marker-alt fa-2x text-white"></i>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                        <i class="fab fa-whatsapp fa-2x text-white"></i>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                        <i class="fas fa-clock fa-2x text-white"></i>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                        <i class="fas fa-headset fa-2x text-white"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Information Section -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">اطلاعات تماس</h2>
                <p class="lead text-muted">
                    از طریق روش‌های مختلف با ما در تماس باشید
                </p>
            </div>
            
            <div class="row g-4">
                <!-- Address Card -->
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-map-marker-alt fa-2x"></i>
                            </div>
                            <h5 class="card-title fw-bold mb-3">نشانی دفتر</h5>
                            <p class="card-text text-muted">
                                ایران، کرمانشاه، شهرک صنعتی اسلام آباد غرب، خیابان کارگر پلاک 2
                            </p>
                            <a href="#map-section" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-map me-1"></i>
                                مشاهده روی نقشه
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Phone Card -->
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-phone fa-2x"></i>
                            </div>
                            <h5 class="card-title fw-bold mb-3">تلفن تماس</h5>
                            <div class="mb-3">
                                <p class="card-text text-muted mb-1">
                                    <strong>کرمانشاه:</strong>
                                </p>
                                <a href="tel:08345323211" class="btn btn-success btn-sm mb-2">
                                    <i class="fas fa-phone me-1"></i>
                                    08345323211
                                </a>
                            </div>
                            <div>
                                <p class="card-text text-muted mb-1">
                                    <strong>تهران:</strong>
                                </p>
                                <a href="tel:02191550290" class="btn btn-success btn-sm">
                                    <i class="fas fa-phone me-1"></i>
                                    02191550290
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- WhatsApp Support Card -->
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fab fa-whatsapp fa-2x"></i>
                            </div>
                            <h5 class="card-title fw-bold mb-3">پشتیبانی واتساپ</h5>
                            <p class="card-text text-muted mb-3">
                                برای دریافت پاسخ سریع، از واتساپ استفاده کنید
                            </p>
                            <a href="https://wa.me/989183282405" target="_blank" rel="noopener noreferrer" class="btn btn-success">
                                <i class="fab fa-whatsapp me-2"></i>
                                09183282405
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Email Card -->
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-envelope fa-2x"></i>
                            </div>
                            <h5 class="card-title fw-bold mb-3">ایمیل</h5>
                            <p class="card-text text-muted mb-3">
                                برای سوالات فنی و همکاری
                            </p>
                            <a href="mailto:info@memaps.ir" class="btn btn-info text-white">
                                <i class="fas fa-envelope me-2"></i>
                                info@memaps.ir
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Telegram Card -->
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fab fa-telegram fa-2x"></i>
                            </div>
                            <h5 class="card-title fw-bold mb-3">کانال تلگرام</h5>
                            <p class="card-text text-muted mb-3">
                                برای اطلاع از آخرین اخبار و آموزش‌ها
                            </p>
                            <a href="https://t.me/osmUsersGroup" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
                                <i class="fab fa-telegram me-2"></i>
                                عضویت در کانال
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Support Hours Card -->
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 border-0 shadow-sm hover-card">
                        <div class="card-body text-center p-4">
                            <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-clock fa-2x"></i>
                            </div>
                            <h5 class="card-title fw-bold mb-3">ساعات پاسخگویی</h5>
                            <p class="card-text text-muted mb-2">
                                <strong>شنبه تا چهارشنبه:</strong><br>
                                8:00 صبح تا 5:00 عصر
                            </p>
                            <p class="card-text text-muted">
                                <strong>پنجشنبه:</strong><br>
                                8:00 صبح تا 1:00 ظهر
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- Map Section -->
    <section id="map-section" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">موقعیت ما</h2>
                <p class="lead text-muted">
                    نقشه موقعیت دفتر ما در کرمانشاه
                </p>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-0">
                            <div id="contact-map" style="height: 450px; border-radius: 8px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">سوالات متداول</h2>
                <p class="lead text-muted">
                    پاسخ سوالات رایج شما
                </p>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item border-0 shadow-sm mb-3">
                            <h2 class="accordion-header" id="faq1">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                                    چگونه می‌توانم از سرویس نقشه می‌مپس استفاده کنم؟
                                </button>
                            </h2>
                            <div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    برای استفاده از سرویس نقشه می‌مپس، کافی است URL نقشه را در پروژه خود قرار دهید. برای اطلاعات بیشتر به صفحه راهنمای استفاده مراجعه کنید.
                                </div>
                            </div>
                    </div>
                    
                        <div class="accordion-item border-0 shadow-sm mb-3">
                            <h2 class="accordion-header" id="faq2">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                                    آیا استفاده از سرویس رایگان است؟
                                </button>
                            </h2>
                            <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    بله، استفاده از سرویس نقشه می‌مپس برای مصارف شخصی و غیرتجاری رایگان است. برای استفاده تجاری با ما تماس بگیرید.
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item border-0 shadow-sm mb-3">
                            <h2 class="accordion-header" id="faq3">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                                    چگونه می‌توانم با تیم پشتیبانی تماس بگیرم؟
                                </button>
                            </h2>
                            <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    می‌توانید از طریق تلفن، واتساپ یا ایمیل با ما در ارتباط باشید. تیم پشتیبانی در ساعات کاری آماده پاسخگویی است.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block leaflet_css %}
    {{ parent() }}
    <style>
        #contact-map {
            border-radius: 8px;
            overflow: hidden;
        }
        
        .hover-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .hover-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        }
        
        .accordion-button:not(.collapsed) {
            background-color: var(--bs-primary);
            color: white;
        }
        
        .accordion-button:focus {
            box-shadow: none;
            border-color: rgba(0,0,0,0.125);
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/leaflet/leaflet.js') }}"></script>
    <script>
        // Initialize contact map
        document.addEventListener('DOMContentLoaded', function() {
            const map = L.map('contact-map').setView([34.112632, 46.590877], 15); // Kermanshah coordinates
            
            L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
                attribution: '© می‌مپس',
                maxZoom: 18,
            }).addTo(map);
            
            // Add marker for office location
            const officeMarker = L.marker([34.112632, 46.590877]).addTo(map);
            officeMarker.bindPopup(`
                <div class="text-center">
                    <h6 class="fw-bold mb-2">دفتر می‌مپس</h6>
                    <p class="mb-2">شهرک صنعتی اسلام آباد غرب</p>
                    <p class="mb-2">خیابان کارگر پلاک 2</p>
                    <div class="mt-3">
                        <a href="tel:08345323211" class="btn btn-success btn-sm me-2">
                            <i class="fas fa-phone me-1"></i>
                            تماس
                        </a>
                        <a href="https://wa.me/989183282405" target="_blank" class="btn btn-success btn-sm">
                            <i class="fab fa-whatsapp me-1"></i>
                            واتساپ
                        </a>
                    </div>
                </div>
            `);


        });
    </script>
{% endblock %}