@extends('layouts.frontend.app')

@section('title', 'About Us')

@section('content')

<section class='about-section'>

    <div class="container">
        <div class="row">
            <div class="col-md-6 about-frist-row">
                <a href="/" class="back-btn">
                    <span class="svg-ic">
                       <i class="bi bi-arrow-left-circle"></i>
                    </span>
                    Back to Home
                </a>
                <h1>{{$page->title ?? ''}}</h1>
                <p>{!! $page->content ?? '' !!}.</p>
            </div>
        </div>
    </div>
</section>
<section class='section-about'>
    
<div class="container">
    <div class="row align-items-center">
        <div class="col-md-6 image-aabout">
            <img src="{{asset('/uploads/page/') ."/". $page->image ?? ''}}" class="img-fluid " alt="About PopCult">
        </div>
        <div class="col-md-6 ">

        {!! $page->description ?? '' !!}
    
         <a href="{{ route('contact') }}" class="mt-4 about-contact">Contact Us <i class="bi bi-chevron-right"></i></a>
        
        </div>
    </div>
</div>
</section>

<section class="section-freeship">
  <div class="container">
        <div class="row">
          <div class="col-xl-3 col-md-6 col-sm-6 col-12">
              <div class="single-feature mb-40 style_three" style="background: #ffffff ">
                  <div class="feature-icon"><img src="http://popconcult.techsaga.live/frontend/assets/images/free-delivery_small.png" alt=""></div>
                  <div class="feature-content">
                      <h4 style="color: #333333">Free Shipping</h4>
                      <p style="color: #333333">Order over $100</p>
                  </div>
              </div>

          </div>
          <div class="col-xl-3 col-md-6 col-sm-6 col-12">

              <div class="single-feature mb-40 style_three" style="background: #ffffff ">
                  <div class="feature-icon"><img src="http://popconcult.techsaga.live/frontend/assets/images/shield_small.png" alt=""></div>
                  <div class="feature-content">
                      <h4 style="color: #242424">Secure Payment</h4>
                      <p style="color: #757575">100% Secure Payment</p>
                  </div>
              </div>

          </div>
          <div class="col-xl-3 col-md-6 col-sm-6 col-12">

              <div class="single-feature mb-40 style_three" style="background: #ffffff ">
                  <div class="feature-icon"><img src="http://popconcult.techsaga.live/frontend/assets/images/best-price_small.png" alt=""></div>
                  <div class="feature-content">
                      <h4 style="color: #242424">Best Price</h4>
                      <p style="color: #757575">Guaranteed Low Cost</p>
                  </div>
              </div>

          </div>
          <div class="col-xl-3 col-md-6 col-sm-6 col-12">

              <div class="single-feature mb-40 style_three" style="background: #ffffff ">
                  <div class="feature-icon"><img src="http://popconcult.techsaga.live/frontend/assets/images/return_small.png" alt=""></div>
                  <div class="feature-content">
                      <h4 style="color: #242424">Easy Return</h4>
                      <p style="color: #757575">Within 30 Days returns</p>
                  </div>
              </div>

          </div>
      </div>
  </div>
 </section>
<section class="mission-section">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6  vvmm">
                <h2>Our Vision , Mission & Values</h2>
                <p>We inspire growth, uphold integrity, deliver excellence, and create value-driven solutions with trust and innovation.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-3 mb-lg-0">
                <div class="card-mision">
                    <div class="card-mision-img">
                     <span>
                        <img src="http://popconcult.techsaga.live/frontend/assets/images/vsion-icon.png" alt="">
                     </span>
                    </div>
                    <div class="card-mision-content">
                        <h3>Our Vision</h3>
                        <p>To be the ultimate one-stop destination for books and comic lovers worldwide, sharing the joy of reading one story at a time.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3 mb-lg-0">
                <div class="card-mision">
                    <div class="card-mision-img">
                     <span>
                         <img src="http://popconcult.techsaga.live/frontend/assets/images/mission-icon.png" alt="">
                     </span>
                    </div>
                    <div class="card-mision-content">
                        <h3>Our Mission</h3>
                        <p>To provide readers a seamless way to discover and enjoy a wide collection of comics and books across genres, languages, and formats.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3 mb-lg-0">
                <div class="card-mision">
                    <div class="card-mision-img">
                     <span>
                         <img src="http://popconcult.techsaga.live/frontend/assets/images/value-icon.png" alt="">
                     </span>
                    </div>
                    <div class="card-mision-content">
                        <h3>Our Values</h3>
                        <p>We celebrate stories, connect fans, honour creators, and deliver quality comics and books for everyone to enjoy.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 <section class="jionabout">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="jion-col">
                    <div class="row">
                        <div class="col-md-6 jion-col-col">
                            <h3>Join the community</h3>
                            <p>Enter your email address to receive regular updates, as well as news on upcoming events and specific offers.</p>
                        
                            <div class="input-email">
                                <form class="dynamic-form d-block newsletter-form" action="{{route('newletter.subscribe')}}" method="post">
                                    <div> <input type="email" name="email" class='email-in' placeholder="Your email address" required>
                                <button type="submit">Subscribe</button></div>
                               
                                </form>
                            </div>
                          
                        </div>
                        <div class="col-md-6 jion-bg">
                                <img src="http://popconcult.techsaga.live/frontend/assets/images/h2_img.png" alt="">
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
 </section>
@endsection