{% extends 'website/base/base.html' %}
{% block title %} POS System Fast | Scalable | Business-Ready {% endblock %}
{% block meta_description %}Calculate your raw material requirement, generate detailed invoice and handle your UPVC product inventory with our inventory calculator.{% endblock %}

{% block stylesheets %}




<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link href="../static/website/assets/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/website/assets/css/flaticon.css" rel="stylesheet">
<link href="../static/website/assets/css/owl.css" rel="stylesheet">
<link href="../static/website/assets/css/bootstrap.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/website/assets/css/animate.css" rel="stylesheet">
<link href="../static/website/assets/css/aos.css" rel="stylesheet">
<link href="../static/website/assets/css/nice-select.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery-ui.css" rel="stylesheet">
<link href="../static/website/assets/css/elpath.css" rel="stylesheet">
<link href="../static/website/assets/css/color.css" id="jssDefault" rel="stylesheet">
<link href="../static/website/assets/css/rtl.css" rel="stylesheet">
<link href="../static/website/assets/css/style.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/service.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/cta.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/process.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/pricing.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/contact.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">


<style>
        body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 0;
        }
        .video-resize {
        width: 100%;  /* Full width */
        height: 600px; /* Adjust the height as needed */
        object-fit: cover; /* Ensures the video fills the area without distortion */
    }


    .features-section {
    padding: 50px 0;
}

.feature-block {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.feature-block img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

.feature-block span {
    font-size: 16px;
    color: #ffffff;
    text-align: justify;
}

.col-lg-6 {
    display: flex;
    flex-direction: column;
}
</style>


{% endblock stylesheets %}

{% block content %}





        <section  class="banner-style-two banner-style-five p_relative pt_200">
            
            <div class="auto-container">
                <div class="row align-items-center"> 
                    <div class="col-lg-6 col-md-12 col-sm-12 video-column">
                        <div class="video-box">
                            <figure class="video">
                                <img src="../static/website/assets/images/pos-system.jpeg" alt="Logo" width="70%" height="auto">
                            </figure>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content-box">
                            <p style="font-size: 17px; text-align: justify;">
                                Our Point of Sale (POS) System is a powerful, Python-based business management
software designed to streamline sales, inventory, and financial operations for modernbusinesses. This mobile-friendly POS system works seamlessly across web and mobiledevices, allowing you to manage your business anytime, anywhere. Fromproduct
management and inventory tracking to sales processing, reporting, and analytics, this
POS software provides a complete digital solution for retailers, wholesalers, andenterprises. Whether you run a retail store, supermarket, warehouse, or multi-branch business, our POS system helps you automate operations, improve efficiency, and boost
profitability.
                            </p> 
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>




        <section class="video-section p_relative pt_100">
            <div class="pattern-layer-2" style="background-image: url(../static/website/assets/images/shape/bg-03.png);"></div>
            <div class="auto-container">
                <div class="row align-items-center">
                    <div class="col-12">
                        <div class="video-box">
                            <figure class="video">
                                <video class="video-resize" controls>
                                    <source src="../static/website/assets/images/digiinn-vid.mp4" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>








        <section class="banner-style-two banner-style-five p_relative pt_100 pb_100">
            <div class="auto-container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content-box">
                           <h3 style="font-size: 47px; font-weight: 800; background: linear-gradient(45deg, rgba(107,145,199,1) 0%, rgba(214,91,129,1) 100%); -webkit-background-clip: text; color: transparent;">
                                Why Choose Our POS System?
                            </h3>

                            <p style="font-size: 15px;">
                                Businesses today need a fast, reliable, and scalable POS solution to manage
operations efficiently. Our system is built to handle everything fromsales transactions
to inventory and financial tracking in one place. Here’s why businesses prefer our POS software solution:
                            </p>

                            <ul style="font-size: 15px; line-height: 1.8; margin-left: 20px;">
                                <li>1. Mobile-Friendly POS System - Access your business anytime, anywhere</li>
                                <li>2. Advanced Inventory Management - Real-time stock tracking across warehouses</li>
                                <li>3. Seamless Sales & Billing - Faster checkout with accurate invoicing</li>
                                <li>4. Powerful Analytics & Reports - Make data-driven business decisions</li>
                                <li>5. Secure Role-Based Access - Control staff permissions and data visibility</li>
                                <li>6. Multi-Module Integration - Sales, purchases, accounts, and HR in one system</li>
                                <li>6. Fully Customizable POS Software - Tailored to your business needs</li>
                            </ul>

                            <p style="font-size: 15px;">
                                Perfect for retail stores, supermarkets, restaurants, wholesalers, and multi-locationbusinesses, this POS system ensures smooth operations and better customer
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12">
                        <div class="image-box">
                            <figure>
                                <!-- Replace with your desired image URL -->
                                <img src="../static/website/assets/images/pos-system-img.jpeg" alt="Service Image" width="100%" height="auto">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>









       <section class="features-section">
  <div class="auto-container">
    <!-- Row 1 -->
    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Dashboard</h5>
              <p>
                Get a real-time overview of sales, inventory, revenue, and business performance.
              </p>
            </span>
          </div>

          
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Product Management</h5>
                            <ul>
                                <li>1. Add and manage products</li>
                                <li>2. Import bulk product data</li>
                                <li>3. Generate and print barcodes/labels</li>
                            </ul>
            </span>
          </div>

          
        </div>
      </div>
    </div>


    <!-- Row 3 -->
    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
         <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Inventory Control</h5>
                            <ul>
                                <li>1. Stock adjustments and stock counts</li>
                                <li>2. Warehouse and multi-location inventory tracking</li>
                                <li>3. Real-time quantity updates</li>
                            </ul>
            </span>
          </div>
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Sales Management</h5>
                            <ul>
                                <li>1. Fast billing and checkout</li>
                                <li>2. Sales tracking and history</li>
                                <li>3. Invoice generation</li>
                            </ul>
            </span>
          </div>
        </div>
      </div>
    </div>



    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
         <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Quotations</h5>
                            <ul>
                                <li>1. Create and manage customer quotations</li>
                                <li>2. Convert quotations into sales</li>
                            </ul>
            </span>
          </div>
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Purchases Management</h5>
                            <ul>
                                <li>1. Manage supplier purchases</li>
                                <li>2. Track incoming stock and invoices</li>
                            </ul>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Row 2 -->
    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Transfers</h5>
                            <ul>
                                <li>1. Transfer stock between warehouses or branches</li>
                                <li>2. Track incoming stock and invoices</li>
                            </ul>
            </span>
          </div>

          
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">User & HR Management</h5>
                            <ul>
                                <li>1. Manage staff roles and permissions</li>
                                <li>2. Track attendance and employee records</li>
                            </ul>
            </span>
          </div>

         
        </div>
      </div>
    </div>

    <!-- Row 3 -->
    <div class="row">
      <!-- First Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Customer & Supplier Management</h5>
                            <ul>
                                <li>1. Maintain customer groups and purchase history</li>
                                <li>2. Manage supplier records and transactions</li>
                            </ul>
            </span>
          </div>
        </div>
      </div>

      <!-- Second Column -->
      <div class="col-lg-6">
        <div class="feature-box">
          <div class="feature-block">
            <img src="../static/website/assets/images/icons/icon-2.png" alt="Settings Icon">
            <span>
              <h5 style="color: white;">Accounts & Finance</h5>
                            <ul>
                                <li>1. Track income and expenses</li>
                                <li>2. Manage taxes and currencies</li>
                                <li>2. Financial reporting and accounting</li>
                            </ul>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ✅ CSS Styling -->
<style>
  .feature-box {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
  }

  .feature-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.45);
  }

  .feature-block {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
  }

  .feature-block img {
    width: 55px;
    height: 55px;
    margin-right: 15px;
    filter: brightness(0) invert(1);
  }

  .feature-block h5 {
    font-size: 18px;
    margin-bottom: 6px;
    color: #fff;
  }

  .feature-block p {
    font-size: 14px;
    color: #ddd;
    margin: 0;
    line-height: 1.6;
  }

  .row {
    align-items: stretch;
  }

  .feature-box {
    height: 100%;
  }

  @media (max-width: 991px) {
    .feature-block {
      flex-direction: column;
      align-items: flex-start;
    }

    .feature-block img {
      margin-bottom: 10px;
    }
  }
</style>



<section class="banner-style-two banner-style-five p_relative pb_100">
  <div class="auto-container text-center">
    <h3 style="font-size: 47px; font-weight: 800; background: linear-gradient(45deg, rgba(107,145,199,1) 0%, rgba(214,91,129,1) 100%); -webkit-background-clip: text; color: transparent;">
                                Key Advantages
                            </h3>
    <p style="color: #bbb; max-width: 700px; margin: 0 auto 50px; font-size: 16px;">
      Empower your real estate business with automation, transparency, and efficiency — designed to help you grow faster and smarter.
    </p>

    <div class="row justify-content-center">
      <!-- Advantage 1 -->
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="advantage-card">
          <div class="icon">⚙️</div>
          <h5>Automate Repetitive Processes</h5>
          <p>Reduce manual effort by automating billing, reports, and operational workflows seamlessly.</p>
        </div>
      </div>

      <!-- Advantage 2 -->
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="advantage-card">
          <div class="icon">⏰</div>
          <h5>Save Time</h5>
          <p>Eliminate paperwork and delays with a single digital platform for all departments.</p>
        </div>
      </div>

      <!-- Advantage 3 -->
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="advantage-card">
          <div class="icon">🤝</div>
          <h5>Improve Client Experiences</h5>
          <p>Deliver faster services, transparent updates, and a smoother communication channel.</p>
        </div>
      </div>

      <!-- Advantage 4 -->
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div class="advantage-card">
          <div class="icon">📈</div>
          <h5>Scale Your Business</h5>
          <p>Grow confidently with insights, analytics, and centralized data for every project.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ✅ CSS -->
<style>
  .advantage-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    padding: 20px 15px;
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    height: 100%;
  }

  .advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  }

  .advantage-card .icon {
    font-size: 36px;
    margin-bottom: 15px;
  }

  .advantage-card h5 {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .advantage-card p {
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
  }

  @media (max-width: 991px) {
    .advantage-card {
      margin-bottom: 25px;
    }
  }
</style>






<section class="faq-section p_relative pb_100">
  <div class="auto-container">
    <div class="text-center mb-5">
      
      <h3 style="font-size: 47px; font-weight: 800; background: linear-gradient(45deg, rgba(107,145,199,1) 0%, rgba(214,91,129,1) 100%); -webkit-background-clip: text; color: transparent;">
        Frequently Asked Questions
      </h3>
      <p style="color: #bbb; font-size: 16px; max-width: 700px; margin: 10px auto 0;">
        Everything you need to know about D Estate Pro — from setup to management.
      </p>
    </div>

    <div class="faq-container">
      <!-- FAQ Item 1 -->
      <div class="faq-item">
        <button class="faq-question">
          Q1: What is a POS system used for?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>A POS system is used to process sales transactions, manage inventory, and track business performance in real time</p>
        </div>
      </div>

      <!-- FAQ Item 2 -->
      <div class="faq-item">
        <button class="faq-question">
          Q2: Is this POS system mobile-friendly?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>Yes, it is a fully mobile-responsive POS system that works like an app on smartphones and tablets.</p>
        </div>
      </div>

      <!-- FAQ Item 3 -->
      <div class="faq-item">
        <button class="faq-question">
          Q3: Can I manage multiple stores or warehouses?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>Yes, the system supports multi-location inventory and warehouse management.</p>
        </div>
      </div>

      <!-- FAQ Item 4 -->
      <div class="faq-item">
        <button class="faq-question">
          Q4: Does it include accounting features?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>Yes, it includes accounts, expenses, taxes, and financial reporting modules.</p>
        </div>
      </div>

      <!-- FAQ Item 5 -->
      <div class="faq-item">
        <button class="faq-question">
          Q5: Can I customize the POS system?
          <span class="arrow">+</span>
        </button>
        <div class="faq-answer">
          <p>Absolutely this is a fully customizable POS software tailored to your business requirements.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ✅ CSS -->
<style>
  .faq-container {
    max-width: 900px;
    margin: 0 auto;
  }

  .faq-item {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .faq-question {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: left;
    padding: 18px 20px;
    color: white;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
  }

  .faq-question .arrow {
    position: absolute;
    right: 20px;
    top: 18px;
    font-size: 20px;
    transition: transform 0.3s;
  }

  .faq-item.active .faq-question .arrow {
    transform: rotate(45deg);
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 20px;
  }

  .faq-item.active .faq-answer {
    max-height: 200px;
    padding-bottom: 15px;
  }

  .faq-answer p {
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
  }

  .faq-question:hover {
    background: rgba(255,255,255,0.05);
  }
</style>

<!-- ✅ JavaScript -->
<script>
  const faqItems = document.querySelectorAll('.faq-item');

  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    question.addEventListener('click', () => {
      item.classList.toggle('active');
    });
  });
</script>









         <!-- contact-section -->
         <section class="contact-section p_relative pb_150">
            <div class="auto-container">
                <div class="sec-title mb_60 centred light">
                    <h2>Get Access Now</h2>
                </div>
                <div class="form-inner">
                    <form id="contact-form">
                        {% csrf_token %}
                        
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="username" placeholder="Your Name" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="company_name" placeholder="Your Company Name" required>
                            </div>
                        </div>                       
                    
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="email" class="form-control" name="email" placeholder="Your Email" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="contact_no" placeholder="Your Contact Number" required>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3">
                                <textarea class="form-control" name="message" placeholder="Type your message or description" rows="4"></textarea>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn mr-0 Right pt_20 text-center">
                                <button style="border: none;" class="theme-btn btn-two btn btn-primary w-100" type="submit">
                                    <span>Send Message</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <!-- Success Message -->
                    <div id="success-message" style="display: none; color: green; text-align: center; margin-top: 10px;">
                        Your message has been sent successfully!
                    </div>
                    
                    <script>
                        document.getElementById("contact-form").addEventListener("submit", function(event) {
                            event.preventDefault();  // Prevent normal form submission
                            
                            let formData = new FormData(this);
                            
                            fetch("{% url 'submit_lead' %}", {
                                method: "POST",
                                body: formData,
                                headers: {
                                    "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    document.getElementById("success-message").style.display = "block";
                                    document.getElementById("contact-form").reset();
                                } else {
                                    alert("Something went wrong. Please try again.");
                                }
                            })
                            .catch(error => console.error("Error:", error));
                        });
                    </script>
                </div>
            </div>
        </section>
        <!-- contact-section end -->






       


      

       


      


       

        {% block javascripts %}


    <!-- jequery plugins -->
    <script src="../static/website/assets/js/jquery.js"></script>
    <script src="../static/website/assets/js/bootstrap.min.js"></script>
    <script src="../static/website/assets/js/owl.js"></script>
    <script src="../static/website/assets/js/wow.js"></script>
    <script src="../static/website/assets/js/jquery.fancybox.js"></script>
    <script src="../static/website/assets/js/appear.js"></script>
    <script src="../static/website/assets/js/isotope.js"></script>
    <script src="../static/website/assets/js/jquery.nice-select.min.js"></script>
    <script src="../static/website/assets/js/aos.js"></script>
    <script src="../static/website/assets/js/jquery-ui.js"></script>
    <script src="../static/website/assets/js/product-filter.js"></script>
    <script src="../static/website/assets/js/bxslider.js"></script>
    <script src="../static/website/assets/js/jquery.bootstrap-touchspin.js"></script>
    <script src="../static/website/assets/js/validation.js"></script>

    <!-- main-js -->
    <script src="../static/website/assets/js/script.js"></script>

    {% endblock javascripts %}
    {% endblock content %}