m

public/build/manifest.json

@@ -327,7 +327,7 @@
     "src": "public/webfonts/fa-solid-900.woff2"
   },
   "resources/css/app.css": {
-    "file": "assets/app-DPkpeuli.css",
+    "file": "assets/app-DazimhE-.css",
     "src": "resources/css/app.css",
     "isEntry": true
   },

resources/css/app.css

@@ -56,6 +56,84 @@
 }
 
 
+.swiper-button-next,
+.swiper-button-prev {
+    width: 80px !important;
+    opacity: 0.8;
+}
+
+.swiper-button-next:hover,
+.swiper-button-prev:hover {
+    opacity: 0.95 !important;
+}
+
+.swiper-button-next:after,
+.swiper-rtl .swiper-button-prev:after,
+.swiper-button-prev:after,
+.swiper-rtl .swiper-button-next:after {
+    /*content: 'next';*/
+    font-size: 17px;
+    background: red;
+    width: 40px;
+    background: #fff;
+    border-radius: 50%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #aaa;
+}
+
+
+
+.swiper {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.swiper-slide {
+    background-size: cover;
+    background-position: center;
+}
+
+.main-product-swiper {
+    height: 80%;
+    width: 100%;
+    border-radius: 15px;
+}
+
+.thumb-product-swiper {
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 10px 0;
+}
+
+.thumb-product-swiper .swiper-slide {
+    opacity: 0.4;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.thumb-product-swiper .swiper-slide-thumb-active {
+    opacity: 1;
+
+}
+
+.swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+@media (max-width: 767px) {
+    .nav-tabs.nav-tabs-basic {
+        flex-direction: unset;
+    }
+}
+
+
 .modal.show{
     background: rgb(0 0 0 / 46%);
 }

resources/views/front/index.blade.php

@@ -4,10 +4,60 @@
 $page = \App\Models\Page::where('home',1)->firstOrFail();
 @endphp
 <div class="col-12 p-0 ">
-  @if(is_countable(json_decode($page->content,true)))
-  @foreach(json_decode($page->content,true) as $component)
-  @include('components.page',['page'=>$page,'component'=>$component])
-  @endforeach
-  @endif
+    @if(is_countable(json_decode($page->content,true)))
+    @foreach(json_decode($page->content,true) as $component)
+    @include('components.page',['page'=>$page,'component'=>$component])
+    @endforeach
+    @endif
 </div>
-@endsection
+{{-- <style type="text/css">
+
+
+</style>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+<div class="container p-3 mt-5">
+    <div class="swiper default-swiper col-12 mx-auto swiper-container swiper-auto" data-margin="30" data-dots="true" data-nav="true" data-centered="true" data-loop="true" data-items-auto="true" data-effect="cards" >
+        <div class="shape bg-dot yellow rellax w-18 h-18" data-rellax-speed="1"></div>
+        <div class="shape rounded-circle bg-line green rellax w-16 h-16" data-rellax-speed="1" style="bottom: -0.5rem; left: -1.4rem;"></div>
+        <div class="swiper-wrapper">
+            <div class="col-6 swiper-slide text-center d-flex align-items-center justify-content-center home-slide-container ">
+                <a href="https://www.instagram.com/oneline.eg" class="p-0">
+                    <img src="https://oneline.fra1.digitaloceanspaces.com/18/conversions/1000114361-original.webp" style />
+                </a>
+            </div>
+            <div class="col-6 swiper-slide text-center d-flex align-items-center justify-content-center home-slide-container ">
+                <a href="https://www.instagram.com/oneline.eg" class="p-0">
+                    <img src="https://oneline.fra1.digitaloceanspaces.com/19/conversions/1000114362-original.webp" style />
+                </a>
+            </div>
+            <div class="col-6 swiper-slide text-center d-flex align-items-center justify-content-center home-slide-container ">
+                <a href="https://www.instagram.com/oneline.eg" class="p-0">
+                    <img src="https://oneline.fra1.digitaloceanspaces.com/20/conversions/1000114363-original.webp" style />
+                </a>
+            </div>
+        </div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+    </div>
+</div>
+<script type="text/javascript">
+        new Swiper(".default-swiper", {
+            initialSlide: 1,
+            autoplay: {
+			    delay: 3000,
+			 },
+            navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },
+            breakpoints: {
+                0: {
+                    slidesPerView: 1,
+                    spaceBetween: 20
+                },
+                1000: {
+                    slidesPerView: 1,
+                    spaceBetween: 20
+                }
+            }
+        });
+    </script> --}}
+@endsection