added grid clip theme part

fixed autoplay limit problem

resources/views/segments/clips/AutoPlayClips/AutoPlayClips.blade.php

@@ -4,7 +4,7 @@
             {{getSetting($data->area_name.'_'.$data->part.'_title')}}
         </h1>
         <div class="autoplay-clip-list">
-        @foreach(\App\Models\Clip::where('status',1)->get() as $clip)
+        @foreach(\App\Models\Clip::where('status',1)->orderByDesc('id')->limit(4)->get() as $clip)
             <div class="autoplay-clip-item">
                 <a href="{{$clip->webUrl()}}">
                     <i class="ri-play-circle-line"></i>

resources/views/segments/clips/GridClips/GridClips.blade.php

@@ -0,0 +1,18 @@
+<section class='GridClips'>
+    <div class="{{gfx()['container']}}">
+        <div class="grid-video-container">
+            @foreach(\App\Models\Clip::where('status',1)->orderByDesc('id')->limit(4)->get() as $clip)
+                <div class="grid-clip-item">
+                    <i class="ri-file-video-line"></i>
+                    <a href="{{$clip->webUrl()}}">
+                        <img src="{{$clip->imgUrl()}}" alt="{{$clip->title}}">
+                        <h3>
+                            {{$clip->title}}
+                        </h3>
+                    </a>
+                    {{--                <img src="{{$clip->imgUrl()}}" alt="">--}}
+                </div>
+            @endforeach
+        </div>
+    </div>
+</section>

resources/views/segments/clips/GridClips/GridClips.json

@@ -0,0 +1,10 @@
+{
+    "name": "GridClips",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/clips/GridClips/GridClips.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class GridClips
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/clips/GridClips/GridClips.scss

@@ -0,0 +1,129 @@
+.GridClips {
+    // scss
+    padding: 3rem 0;
+
+    .grid-video-container {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px;
+        grid-template-rows: repeat(2, 1fr);
+        height: 70vh; // Set the height of the grid
+        width: 100%; // Full width of the container
+    }
+
+    .grid-clip-item {
+        border-radius: var(--xshop-border-radius);
+        overflow: hidden;
+        position: relative;
+
+        i{
+            position: absolute;
+            top: 1rem;
+            inset-inline-end: 1rem;
+            z-index: 3;
+            padding: .3rem;
+            background: #ffffff66;
+            font-size: 30px;
+            display: inline-block;
+            border-radius: var(--xshop-border-radius);
+            backdrop-filter: blur(7px);
+        }
+        h3{
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            text-align: center;
+            background: var(--xshop-diff);
+            padding: 1rem;
+            background: #ffffff66;
+            color: black;
+            backdrop-filter: blur(7px);
+            opacity: 0;
+            transition: 400ms;
+            transform: translateY(-50%);
+        }
+        img {
+            object-fit: cover;
+            transition: 400ms;
+            width: 100%;
+            height: 100%;
+        }
+
+        &:hover{
+            h3{
+                opacity: 1;
+            }
+
+            img{
+                transform: rotateZ(3deg) scale(1.3) ;
+                filter: contrast(1.7) grayscale(.75);
+            }
+        }
+
+        // First item (half of the grid)
+        &:nth-child(1) {
+            grid-column: 1 / 3; // Span columns 1 and 2
+            grid-row: 1 / 3; // First row
+        }
+
+        // Second item (25% width, 50% height)
+        &:nth-child(2) {
+            grid-column: 3; // Third column
+            grid-row: 1 / 2; // First row
+        }
+
+        // Third item (25% width, 50% height)
+        &:nth-child(3) {
+            grid-column: 3; // Fourth column
+            grid-row: 2 / 3; // First row
+        }
+
+        // Fourth item (full height, 25% width)
+        &:nth-child(4) {
+            grid-column: 4; // Third column
+            grid-row: 1 / 3; // Second row
+        }
+    }
+
+    /*-992px width*/
+    @media (max-width: 992px) {
+
+        .grid-video-container {
+            grid-template-columns: repeat(4, 1fr);
+            gap: 10px;
+            grid-template-rows: repeat(4, 1fr);
+        }
+
+        .grid-clip-item {
+
+            // First item (half of the grid)
+            &:nth-child(1) {
+                grid-column: 1 / 5; // Span columns 1 and 2
+                grid-row: 1 / 3; // First row
+            }
+
+            // Second item (25% width, 50% height)
+            &:nth-child(2) {
+                grid-column: 1  / 3; // Third column
+                grid-row: 3 / 4; // First row
+            }
+
+            // Third item (25% width, 50% height)
+            &:nth-child(3) {
+                grid-column: 1 / 3; // Fourth column
+                grid-row: 4 / 5; // First row
+            }
+
+            // Fourth item (full height, 25% width)
+            &:nth-child(4) {
+                grid-column:  3 / 5; // Third column
+                grid-row: 3 / 5; // Second row
+            }
+        }
+
+        h3{
+            font-size: 17px;
+        }
+    }
+}