Added grid post list

app/Http/Controllers/ClientController.php

@@ -12,7 +12,7 @@ use Spatie\Tags\Tag;
 class ClientController extends Controller
 {
 
-    public $paginate = 10;
+    public $paginate = 12;
 
     //
     public function welcome()

resources/views/segments/posts_page/GridPostList/GridPostList.blade.php

@@ -0,0 +1,66 @@
+<section class='GridPostList'>
+    <div class="{{gfx()['container']}}">
+        <div class="row pinned-posts">
+            @foreach(\App\Models\Post::where('status',1)->where('is_pinned',1)->limit(2)->get() as $post)
+                <div class="col-md-6 p-1">
+                    <div class="post-item">
+                        <div class="corner">
+                            {{$post->mainGroup->name}}
+                        </div>
+                        <a href="{{$post->webUrl()}}">
+                            <img src="{{$post->orgUrl()}}" alt="{{$post->title}}"
+                                 title="{{implode(',',$post->tags->pluck('name')->toArray()??'')}}">
+                        </a>
+                        <div class="detail">
+                            <h4>
+                                {{$post->title}}
+                            </h4>
+                            <span>
+                                {{$post->created_at->ldate('Y/m/d l')}}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+        <hr>
+        <div class="row">
+
+            <div class="col-12">
+                <div class="row">
+                    @foreach($posts as $post)
+                        <div class="col-md-4">
+                            <div class="grid-post-item">
+                                <div class="corner">
+                                    {{$post->mainGroup->name}}
+                                </div>
+                                <img src="{{$post->imgUrl()}}" alt="{{$post->title}}">
+                                <h4>
+                                    {{$post->title}}
+                                </h4>
+                                <div class="text-muted py-2">
+                                    <span>
+                                        <i class="ri-calendar-line"></i>
+                                        {{$post->created_at->ldate('Y/m/d l')}}
+                                    </span>
+                                    <span class="float-end">
+                                        <i class="ri-eye-line"></i>
+                                        {{$post->view}}
+                                    </span>
+                                </div>
+                                <p>
+                                    {{$post->subtitle}}
+                                    <br>
+                                </p>
+                                <a href="{{$post->webUrl()}}" class="btn btn-outline-primary my-2 btn-sm">
+                                    {{__("Read more")}}
+                                </a>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+                {{$posts->links()}}
+            </div>
+        </div>
+    </div>
+</section>

resources/views/segments/posts_page/GridPostList/GridPostList.json

@@ -0,0 +1,10 @@
+{
+    "name": "GridPostList",
+    "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/posts_page/GridPostList/GridPostList.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class GridPostList
+{
+    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/posts_page/GridPostList/GridPostList.scss

@@ -0,0 +1,98 @@
+.GridPostList {
+    .pinned-posts{
+        padding: 2rem 0;
+        //column-gap: 2px;
+        //row-gap: 2px;
+        .post-item{
+            position: relative;
+            height: 350px;
+            border-radius: var(--xshop-border-radius) ;
+            overflow: hidden;
+            background: #333;
+            img{
+                border-radius: var(--xshop-border-radius) ;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                transition: 400ms;
+                opacity: .7;
+            }
+
+            .detail{
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 2;
+                padding: 1rem;
+                color: white;
+                span{
+                    opacity: .5;
+                }
+            }
+
+            .corner{
+                border-radius: var(--xshop-border-radius) ;
+                position: absolute;
+                inset-inline-start: 0;
+                top: 0;
+                background: var(--xshop-primary);
+                color: var(--xshop-diff);
+                z-index: 2;
+                padding: 4px 1rem;
+                font-size: 17px;
+
+            }
+
+            &:hover{
+                img{
+                    transform: scale(1.6);
+                }
+            }
+        }
+    }
+
+    .grid-post-item{
+        position: relative;
+        margin-bottom: 1rem;
+        overflow: hidden;
+        img{
+            width: 100%;
+            height: 300px;
+            object-fit: cover;
+            margin-bottom: 1rem;
+            border-radius: var(--xshop-border-radius) ;
+            transition: 500ms;
+        }
+
+        p{
+            text-align: justify;
+            height: 4em;
+            overflow: hidden;
+        }
+
+        .corner{
+            border-radius: var(--xshop-border-radius) ;
+            position: absolute;
+            inset-inline-start: 0;
+            top: 0;
+            background: var(--xshop-primary);
+            color: var(--xshop-diff);
+            z-index: 2;
+            padding: 4px 1rem;
+            font-size: 17px;
+
+        }
+
+        &:hover{
+            img{
+                filter: contrast(1.2) grayscale(.5);
+            }
+        }
+    }
+}