@extends($activeTemplate.'layouts.frontend')
@section('content')
@php
    $bannerCaption = getContent('banner.content',true);
@endphp
<!-- hero-section start -->
<section class="hero-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <div class="hero-content">
                    <h2 class="hero__title">{{__(@$bannerCaption->data_values->heading)}}</h2>
                    <p>{{__(strip_tags(@$bannerCaption->data_values->sub_heading))}}</p>

                    <div class="btn-area">

                        @if(@$bannerCaption->data_values->button_link)
                            <a href="{{@$bannerCaption->data_values->button_link}}" class="btn btn-primary">{{@__($bannerCaption->data_values->button_name)}}</a>
                        @endif
                        @if(@$bannerCaption->data_values->button_two_link)
                            <a href="{{@$bannerCaption->data_values->button_two_link}}" class="btn btn-primary">{{@__($bannerCaption->data_values->button_two_name)}}</a>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="hero-thumb pulse-animation"><img src="{{frontendImage('banner',@$bannerCaption->data_values->image)}}" alt="image"></div>
            </div>
        </div>
    </div>
</section>


      
            <div>
  <section id="download-app" style="
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: space-between; 
    padding-top: 120px;
    padding-bottom: 120px;
    margin-top: 150px;
    margin-bottom: 150px;
    max-width: 1200px; 
    margin: 0 auto; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0);">
    
    <!-- Left Side: Text, Description, and Button -->
    <div style="
      flex: 1; 
      min-width: 250px; 
      padding: 10px;
    ">
      <h2 style="
        color: #CBA352; 
        margin-bottom: 10px;
      " class="text-white font-weight-normal">
        Download The APK
      </h2>
      <p style="
        color: #ffffff; 
        font-size: 14px; 
        margin-bottom: 15px;">
        Get the latest version of our app by downloading the APK. Enjoy seamless features and enhanced performance for all your needs.
      </p>
      <a href="assets/app/trxtrade.apk" target="_blank" style="text-decoration: none;">
        <button style="
          background-color: #CBA352;
          color: #00000;
          border: none;
          padding: 12px 20px;
          border-radius: 5px;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
          transition: background-color 0.3s ease;
        " onmouseover="this.style.backgroundColor='#A1202B';" onmouseout="this.style.backgroundColor='#CBA352';">
          Download App
        </button>
      </a>
    </div>
    
    <!-- Right Side: Image -->
    <div style="
      flex: 1; 
      min-width: 250px; 
      padding: 10px; 
      text-align: center;
    ">
      <img src="assets/images/app.webp" alt="APK Image" style="
        max-width: 40%; 
        height: auto; 
        border-radius: 8px; /* Optional rounded corners */
      ">
    </div>
  </section>
</div>

      
<!-- hero-section end -->
    @if(@$sections->secs != null)
        @foreach(json_decode($sections->secs) as $sec)
            @include($activeTemplate.'sections.'.$sec)
        @endforeach
    @endif
@endsection