added product grid theme part

resources/views/segments/galleries/GridGallery/GridGallery.blade.php

@@ -3,9 +3,6 @@
         <h1>
             {{ getSetting($data->area->name.'_'.$data->part.'_title')}}
         </h1>
-        <p>
-            {{$gallery->description}}
-        </p>
         <div class="row">
             @foreach(\App\Models\Gallery::where('status',1)->orderBy('id')->limit( getSetting($data->area->name.'_'.$data->part.'_limit'))->get() as $gallery)
                 <div class="col-md p-1">

resources/views/segments/products/ProductGrid/ProductGrid.blade.php

@@ -0,0 +1,45 @@
+<section class='ProductGrid'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{$title}}
+        </h1>
+        <div class="row">
+            @foreach($products as $product)
+                <div class="col-md-4 p-2">
+                    <div class="product-item">
+                        <a class="fav-btn" data-slug="{{$product->slug}}" data-is-fav="{{$product->isFav()}}">
+                            <i class="ri-heart-line"></i>
+                            <i class="ri-heart-fill"></i>
+                        </a>
+                        <a class="compare-btn" data-slug="{{$product->slug}}">
+                            <i class="ri-scales-3-line"></i>
+                        </a>
+                        <a href="{{$product->webUrl()}}">
+                            <img src="{{$product->imgUrl()}}" alt="{{$product->name}}">
+                            <h3>
+                                {{$product->name}}
+                            </h3>
+                            <div class="prices">
+                                @if($product->hasDiscount())
+                                    <span class="old-price">
+                                        {{$product->oldPrice()}}
+                                    </span>
+                                @endif
+                                <span class="price">
+                                    {{$product->getPrice()}}
+                                </span>
+                            </div>
+                            <div class="p-2">
+                                <a href="{{ route('client.product-card-toggle',$product->slug) }}" class="btn btn-outline-primary w-100 add-to-card">
+                                    <i class="ri-shopping-bag-3-line"></i>
+                                    {{__("Add to card")}}
+                                </a>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+        {{$products->links()}}
+    </div>
+</section>

resources/views/segments/products/ProductGrid/ProductGrid.json

@@ -0,0 +1,10 @@
+{
+    "name": "ProductGrid",
+    "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/products/ProductGrid/ProductGrid.scss

@@ -0,0 +1,89 @@
+.ProductGrid {
+    // scss
+    padding: 1rem 0;
+
+    img {
+        width: 100%;
+        height: 250px;
+        object-fit: cover;
+    }
+
+    .product-item {
+        border: 1px solid silver;
+        box-shadow: var(--xshop-shadow);
+        border-radius: var(--xshop-border-radius);
+        position: relative;
+        overflow: hidden;
+
+        h3 {
+            margin-top: 1rem;
+            text-align: center;
+            font-size: 20px;
+            font-weight: 300;
+            color: var(--xshop-text);
+        }
+
+        .prices {
+            display: grid;
+            grid-auto-columns: minmax(0, 1fr);
+            grid-auto-flow: column;
+            text-align: center;
+
+            span {
+                display: block;
+                padding: .5rem;
+            }
+
+            .old-price{
+                text-decoration: red line-through;
+                color: gray;
+            }
+        }
+
+        .fav-btn, .compare-btn {
+            position: absolute;
+            inset-inline-start: -12%;
+            top: 3%;
+            width: 40px;
+            height: 40px;
+            background: #ffffff55;
+            font-size: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            z-index: 4;
+            cursor: pointer;
+            transition: .4s;
+
+            &:hover {
+                background: var(--xshop-primary);
+                color: var(--xshop-diff);
+            }
+        }
+
+        .fav-btn {
+            top: calc(3% + 50px);
+
+            &[data-is-fav="-1"]{
+                display: none;
+            }
+            &[data-is-fav="1"]{
+                .ri-heart-line{
+                    display: none;
+                }
+            }
+            &[data-is-fav="0"]{
+                .ri-heart-fill{
+                    display: none;
+                }
+            }
+        }
+
+        &:hover {
+            .fav-btn, .compare-btn {
+                inset-inline-start: 3%;
+            }
+        }
+    }
+}