areya-energy/content/contents/produkt.blade.php

@layout("content.master")
@section('head')
<title>{{$content->title}}</title>
<style type="text/css">
    li{list-style: none; margin-bottom: 4px; }
</style>
@stop
@section('content')
<div class="container">
  @if(session()->has('success'))
  <div class="alert alert-success">{{session()->get('success')}}</div>
  @elseif(session()->has('error'))
  <div class="alert alert-danger">{{session()->get('error')}}</div>
  @endif
  <section>
    <div class="row">
      <div class="col-5 offset-1">
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://picsum.photos/400/300?1" class="d-block w-100 rounded" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/400/300?2" class="d-block w-100 rounded" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/400/300?3" class="d-block w-100 rounded" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
      <br>
      <br>
      <br>
    </div>
    <div class="col-5 offset-1">
      <h1>Steckersolar Max 600</h1>
      <div class="ms-3 mt-3 mb-3">
          <span class="fs-4 fw-bold" style="color: #546c8a;">759 €</span>
          <span class="text-muted fs-7">Inkl. MwSt.</span>
      </div>
      <div class="ms-3 mt-3 mb-3 fs-6 fw-bolder" style="color: #79b27f;">
          <svg style="fill: currentColor; width: 22px; margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"/></svg>
          Sofort Lieferbar!
          <br>
          <svg style="fill: currentColor; width:18px; margin-right: 15px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504.99 105.01l-97.9-98c-7.71-7.71-16-7-23.1-7v128h128c0-7.53.64-15.35-7-23zm-153 31V.01H152c-13.3 0-24 10.7-24 24V133c18.3-5 19.58-5 26.45-5 16.23 0 32.1 6.67 43.53 18.3 8.72 9.59 4.41 6.98 18.28 10.76 21.07 5.75 37.64 22.53 43.23 43.8 3.11 13.2.6 8.66 10.75 18.99 15.25 15.51 21.26 38.26 15.7 59.36-3.75 13.23-3.71 8.01 0 22.12 5.57 21.11-.45 43.85-15.69 59.37-9.64 9.36-7.04 4.88-10.75 18.99-4.89 18.59-18.16 33.75-35.5 41.12V512h263.99c13.3 0 24-10.7 24-24V160.01h-136c-13.2 0-24-10.8-24-24zM247.42 338.28c7.4-7.53 10.29-18.5 7.58-28.79-5.43-20.65-5.44-17.74 0-38.42 2.71-10.28-.18-21.26-7.58-28.79-14.86-15.12-13.43-12.61-18.87-33.27-2.71-10.28-10.6-18.32-20.71-21.07-20.28-5.53-17.84-4.1-32.69-19.21-7.4-7.53-18.18-10.47-28.28-7.71-20.32 5.54-17.46 5.53-37.75 0-10.1-2.76-20.88.19-28.28 7.71-14.91 15.18-12.5 13.7-32.69 19.21-10.11 2.76-18 10.79-20.71 21.07-5.46 20.74-4 18.13-18.87 33.27-7.4 7.53-10.29 18.5-7.58 28.79 5.45 20.71 5.42 17.79 0 38.41-2.71 10.28.18 21.26 7.58 28.79 14.85 15.11 13.43 12.61 18.87 33.27 2.71 10.28 10.6 18.32 20.71 21.07 14.31 3.9 11.52 2.97 15.84 5V512l64-32 64 32V397.62c4.31-2.02 1.52-1.1 15.84-5 10.11-2.76 18-10.79 20.71-21.07 5.47-20.74 4.01-18.13 18.88-33.27zM128 352.01c-35.34 0-64-28.65-64-64s28.66-64 64-64 64 28.65 64 64-28.66 64-64 64z"/></svg>
          Kostenloser Anmeldeservice beim Netzbetreiber inklusive
      </div>
      <br>
      Lieferumfang:
      <br>
      <br>
      <ul class="fs-5">
          <li>2x Longi 375 Watt Monokristaline Module</li>
          <li>1x 600 Watt Wechselrichter mit Zertifizierung</li>
          <li>1x Kabel für Schuko-Stecker</li>
      </ul>
      <div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-primary rounded-pill mt-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
          <svg style="fill: white; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
          Unverbindlich anfragen
        </button>
        <div class="modal fade" data-backdrop="static" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-fullscreen-lg-down modal-xl modal-dialog-scrollable">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Angebot anfragen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-12">
                    <div class="row text-success text-center mt-1">
                      <div class="col-4">
                        <svg style="fill: currentColor; height: 30px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M16 319.8c8.8 0 16-7.2 16-16s-7.2-16-16-16-16 7.2-16 16c0 8.9 7.2 16 16 16zM632 128l-113.5.2-51.2-49.9c-9.1-9.1-21.1-14.1-33.9-14.1h-101c-10.4 0-20.1 3.9-28.3 10-8.4-6.5-18.7-10.3-29.3-10.3h-69.5c-12.7 0-24.9 5.1-33.9 14.1l-50 50H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h56v191.9H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h56c17.6 0 31.8-14.2 31.9-31.7h33.2l81.5 78c29.8 24.1 71.8 23.4 101-.2l7.2 6.2c9.6 7.8 21.3 11.9 33.5 11.9 16 0 31.1-7 41.4-19.6l21.9-26.9c16.4 8.9 42.9 9 60-12l9.5-11.7c6.2-7.6 9.6-16.6 10.5-25.7h48.6c.1 17.5 14.4 31.7 31.9 31.7h56c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8h-56V160.2l56-.2c4.4 0 8-3.6 8-8v-16c-.1-4.5-3.7-8-8.1-8zM460.2 357.6l-9.5 11.7c-5.4 6.6-15.4 8.1-22.5 2.3l-17.8-14.4-41.5 51c-7.5 9.3-21 10.2-29.4 3.4l-30.6-26.1-10.4 12.8c-16.7 20.5-47 23.7-66.6 7.9L142 320.1H96V159.9h38.6l59.3-59.3c3-3 7.1-4.7 11.3-4.7h69.5c.9 2.2.3.7 1.1 2.9l-59 54.2c-28.2 25.9-29.6 69.2-4.2 96.9 14.3 15.6 58.6 39.3 96.9 4.2l22.8-20.9 125.6 101.9c6.8 5.6 7.8 15.7 2.3 22.5zm83.8-37.5h-57.2c-2.5-3.5-5.3-6.9-8.8-9.8l-121.9-99 28.4-26.1c6.5-6 7-16.1 1-22.6s-16.1-6.9-22.6-1l-75.1 68.8c-14.4 13.1-38.6 12-51.7-2.2-13.6-14.8-12.7-38 2.2-51.7l83.1-76.2c3-2.7 6.8-4.2 10.8-4.2h101c4.3 0 8.3 1.7 11.4 4.8l60.7 59.1H544v160.1zm80-32.2c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16c0-8.9-7.2-16-16-16z"/></svg>
                        <br>
                        <br>
                        Persönliche Beratung
                      </div>
                      <div class="col-4">
                        <svg style="fill: currentColor; width:30px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M502.61 233.32L278.68 9.39C272.42 3.13 264.21 0 256 0s-16.42 3.13-22.68 9.39L9.39 233.32c-12.52 12.53-12.52 32.83 0 45.36l223.93 223.93c6.26 6.26 14.47 9.39 22.68 9.39s16.42-3.13 22.68-9.39l223.93-223.93c12.52-12.53 12.52-32.83 0-45.36zM255.95 479.98L32.02 255.95 255.95 32.01c.01 0 .02-.01.05-.01l.05.02 223.93 224.03-224.03 223.93zM330.89 224H208c-26.51 0-48 21.49-48 48v40c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-40c0-8.84 7.16-16 16-16h122.89l-54.63 50.43c-3.25 3-3.45 8.06-.45 11.3l10.84 11.74c3 3.25 8.06 3.45 11.3.45l78.4-72.36c4.87-4.52 7.66-10.94 7.66-17.58s-2.78-13.06-7.72-17.62l-78.34-72.31c-3.25-3-8.31-2.79-11.3.45l-10.84 11.74c-3 3.25-2.79 8.31.45 11.3L330.89 224z"/></svg>
                        <br>
                        <br>
                        Abholung in Vohenstrauß
                      </div>
                      <div class="col-4">
                        <svg style="fill: currentColor; width:30px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M232 248c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-16zm-96 0c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-16zm32 48h-16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm96 0h-16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm64-48c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-16zm183.4 131.5l-25.5-178.3c-3.4-23.6-23.6-41.2-47.5-41.2H192V96h80c8.8 0 16-7.2 16-16V16c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h80v64H73.6c-23.9 0-44.1 17.6-47.5 41.2L.6 379.5c-.4 3-.6 6-.6 9.1V464c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-75.5c0-3-.2-6-.6-9zM96 64V32h160v32H96zM57.8 205.7c1.1-7.8 7.9-13.7 15.8-13.7h364.7c7.9 0 14.7 5.9 15.8 13.7L479.7 384H32.3l25.5-178.3zM480 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-48h448v48zm-72-232h-16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm-48 64h-16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"/></svg>
                        <br>
                        <br>
                        Zahlung erst bei Liefertermin
                      </div>
                    </div>
                    <div class="card mt-1" style="background-color: #f7fcf7;">
                      <div class="card-header">
                        <h5> 
                          <svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
                            <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm128 421.6c-35.9 26.5-80.1 42.4-128 42.4s-92.1-15.9-128-42.4V416c0-35.3 28.7-64 64-64 11.1 0 27.5 11.4 64 11.4 36.6 0 52.8-11.4 64-11.4 35.3 0 64 28.7 64 64v13.6zm30.6-27.5c-6.8-46.4-46.3-82.1-94.6-82.1-20.5 0-30.4 11.4-64 11.4S204.6 320 184 320c-48.3 0-87.8 35.7-94.6 82.1C53.9 363.6 32 312.4 32 256c0-119.1 96.9-216 216-216s216 96.9 216 216c0 56.4-21.9 107.6-57.4 146.1zM248 120c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 144c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"/>
                          </svg>
                          Persönliche Daten
                        </h5>
                      </div>
                      <div class="card-body">
                        <x-form id-name="anfrage" channels="bestaetigung,fastbill">
                          <div class="mb-3">
                            <label for="" class="form-label">Anrede</label>
                            <select class="form-select" name="anrede" aria-label="Default select example">
                              <option selected>Herr</option>
                              <option>Frau</option>
                              <option>Firma</option>
                            </select>
                          </div>
                          <div class="mb-3">
                            <label for="" class="form-label">Vorname</label>
                            <input type="text" class="form-control" name="vorname" aria-describedby="" placeholder="Maximilian">
                          </div>
                          <div class="mb-3">
                            <label for="" class="form-label">Nachname</label>
                            <input type="text" class="form-control" name="nachname" aria-describedby="" placeholder="Meyer">
                          </div>
                          <div class="mb-3">
                            <label for="exampleInputEmail1" class="form-label">E-Mail</label>
                            <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="max.mustermann@areya.de">
                          </div>
                          <div class="mb-3">
                            <label for="exampleInputEmail1" class="form-label">Telefon</label>
                            <input type="text" class="form-control" name="telefon" aria-describedby="emailHelp" placeholder="0941467233">
                          </div>
                          <div class="mb-3">
                            <label for="exampleInputPassword1" class="form-label">Adresse</label>
                            <input type="text" class="form-control" name="adresse" placeholder="Neuenhammerstr. 44, 92714 Pleystein" id="exampleInputPassword1">
                          </div>
                          <div class="mb-3 form-check mb-4">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1" required>
                            <label class="form-check-label" for="exampleCheck1">Ich habe die Datenschutzbestimmungen gelesen und akzeptiert.</label>
                          </div>
                          <div class="d-block">
                            <button type="submit" class="btn btn-success d-block mx-auto">
                              Angebot anfragen
                            </button>
                          </div>
                        </x-form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="alert alert-warning" role="alert">
          Lieferservice 25km rund um Weiden in der Oberpfalz für 75 €
      </div>
      </div>
          <hr class="mt-5">
      </div>
    </div>
  </section>
  <section style="background-color: wheat;">
      <div class="container">
          <div class="row">
              <div class="col-12">
                  <h2>Häufig gestellte Fragen</h2>
              </div>
          </div>
      </div>
  </section>
</div>
@stop
@section('scripts')
<script>
  /* let objProducts = [];
  function updateProductsInLocalStorage(){
    localStorage.setItem("products", JSON.stringify(objProducts));
  }
  $(window).load(function(){
    let product = {};
    product["id"] = database.attr("data-id");
    product["name"] = database.attr("data-name");
    objProducts.push(product);
    objProducts.splice(index, 1);
    updateProductsInLocalStorage();
    if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
  }); */
</script>
@stop