From f793b90902aa282ce7c8f4f138b9c0f178026b0c Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <=>
Date: Tue, 9 Jan 2024 16:26:14 -0300
Subject: [PATCH] form with sticky top

---
 content/contents/leistungen.blade.php | 66 ++++++++++-----------------
 content/index.blade.php               |  9 ++--
 2 files changed, 27 insertions(+), 48 deletions(-)

diff --git a/content/contents/leistungen.blade.php b/content/contents/leistungen.blade.php
index ef7c731..b065a86 100644
--- a/content/contents/leistungen.blade.php
+++ b/content/contents/leistungen.blade.php
@@ -4,8 +4,6 @@
 
     <div class="pt-3 pb-2 mb-5" style="background-color: {{$_primary_ci_color}}">
         <div class="container">
-
-
             <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                 <ol class="breadcrumb text-decoration-none">
                     <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
@@ -16,8 +14,6 @@
         </div>
     </div>
     <div class="container">
-
-
         <div class="row">
             <div class="col-12 col-lg-7">
                 <div class="row">
@@ -37,10 +33,6 @@
                         {!! $content->beschreibung !!}
                     </div>
 
-
-
-
-
                     @isset($content->bilder)
                             <div class="col-12 mb-5">
                                 <h2 class="mb-4 mt-5 h3">Bilder</h2>
@@ -52,26 +44,20 @@
                             @endforeach
                     @endisset
                 </div>
-
-
-
             </div>
 
-            <div class="col-12 col-lg-4 offset-lg-1">
-                <div class="card mb-5 mt-5 shadow-lg">
+            <div class="col-12 col-lg-4 offset-lg-1" id="lumino-form-sent">
+                <div class="card mb-5 mt-5 shadow-lg position-sticky" style="top:5rem;">
                     <div class="card-header text-center">
                         <h3 class="fs-5 fw-bold">Unverbindlich anfragen</h3>
                     </div>
                     <div class="card-body">
-
                         @if(session()->has('error'))
                             <div class="alert alert-danger mb-4">
                                 <span class="fw-bold">Fehler!</span>
                                 <br>
                                 {{session()->get('error')}}
                             </div>
-
-
                         @endif
 
                         @if(session()->has('success'))
@@ -90,43 +76,39 @@
                                 </div>
                             </div>
                         @else
-
                             <x-form id="anfrage" id-name="anfrage" channels="email-anfrage,bestaetigung-kunde" >
 
-                        <div class="mb-4">
-                            <label for="exampleInputEmail1" class="form-label">Name:</label>
-                            <input type="name" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Max Mustermann" autocomplete="on" required>
-                        </div>
+                                <div class="mb-4">
+                                    <label for="exampleInputEmail1" class="form-label">Name:</label>
+                                    <input type="name" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Max Mustermann" autocomplete="on" required>
+                                </div>
 
-                        <div class="mb-4">
-                            <label for="exampleInputEmail1" class="form-label">Telefonnummer:</label>
-                            <input type="tel" name="tel" class="form-control" id="tel" aria-describedby="emailHelp" placeholder="0170 1234 56478" autocomplete="on">
-                        </div>
+                                <div class="mb-4">
+                                    <label for="exampleInputEmail1" class="form-label">Telefonnummer:</label>
+                                    <input type="tel" name="tel" class="form-control" id="tel" aria-describedby="emailHelp" placeholder="0170 1234 56478" autocomplete="on">
+                                </div>
 
-                        <div class="mb-4">
-                            <label for="email" class="form-label">E-Mail:</label>
-                            <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="beispiel@areya.de" autocomplete="on" required>
-                        </div>
+                                <div class="mb-4">
+                                    <label for="email" class="form-label">E-Mail:</label>
+                                    <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="beispiel@areya.de" autocomplete="on" required>
+                                </div>
 
 
-                        <div class="form-floating mb-4">
-                            <textarea style="height: 80px;" name="nachricht" class="form-control" placeholder="Leave a comment here" id="nachricht"></textarea>
-                            <label for="floatingTextarea">Nachricht</label>
-                        </div>
+                                <div class="form-floating mb-4">
+                                    <textarea style="height: 80px;" name="nachricht" class="form-control" placeholder="Leave a comment here" id="nachricht"></textarea>
+                                    <label for="floatingTextarea">Nachricht</label>
+                                </div>
 
 
-                        <div class="d-grid gap-2">
-                            <button type="submit" class="btn btn-primary btn-block">Anfrage unverbindlich absenden
-                                <svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
-                            </button>
+                                <div class="d-grid gap-2">
+                                    <button type="submit" class="btn btn-primary btn-block">Anfrage unverbindlich absenden
+                                        <svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
+                                    </button>
 
-                        </div>
-
-                    </x-form>
+                                </div>
 
+                            </x-form>
                         @endif
-
-
                     </div>
                 </div>
             </div>
diff --git a/content/index.blade.php b/content/index.blade.php
index 538654b..786c194 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -31,8 +31,7 @@
         @php($leistungen = filterByContentType("Ankündigung"))
         @if($leistungen->isNotEmpty())
                 <div class="container">
-                    <diw class="row pt-1 pt-lg-4">
-
+                    <div class="row pt-1 pt-lg-4">
 
                         @foreach($leistungen->take(3) as $content)
                             <div class="col-12">
@@ -60,11 +59,9 @@
                                             <svg fill="currentColor;" width="25" height="25" class="me-1">
                                                 <image xlink:href="{{asset('fonts/icons/font-awesome/light/user.svg')}}" width="25" height="25"/>
                                             </svg>
-                                            {{ $content->title }}</h5>
+                                            {{ $content->title }}
+                                        </h5>
                                         {{ $content->ankundigung }}
-
-
-
                                     </div>
 
                                 @endisset