added theme part Maryam

fixed ui responsive bug natalia

resources/views/segments/index/MaryamCategoryProducts/MaryamCategoryProducts.blade.php

@@ -0,0 +1,15 @@
+<section class='MaryamCategoryProducts'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{getSetting($data->area_name.'_'.$data->part.'_title')}}
+        </h1>
+
+        <div class="maryam-row">
+            @foreach(getCategoryProductBySetting($part->area_name . '_' . $part->part.'_category',12) as $product)
+                <a class="maryam-item" href="{{$product->webUrl()}}">
+                    <img src="{{$product->imgUrl()}}" alt="{{$product->name}}" class="img-fluid" loading="lazy">
+                </a>
+            @endforeach
+        </div>
+    </div>
+</section>

resources/views/segments/index/MaryamCategoryProducts/MaryamCategoryProducts.json

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

@@ -0,0 +1,65 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Category;
+use App\Models\Part;
+use App\Models\Setting;
+
+class MaryamCategoryProducts
+{
+    public static function onAdd(Part $part = null)
+    {
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_title';
+        $setting->value = 'Another products';
+        $setting->type = 'TEXT';
+        $setting->size = 12;
+        $setting->title =  $part->area_name . ' ' . $part->part .' title';
+        $setting->save();
+
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_color_bg';
+        $setting->value = '#1c213a';
+        $setting->data = json_encode(['name' => 'maryam-bg-color']);
+        $setting->type = 'COLOR';
+        $setting->size = 4;
+        $setting->title =  $part->area_name . ' ' . $part->part .' background color';
+        $setting->save();
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_color_text';
+        $setting->value = '#ffae00';
+        $setting->data = json_encode(['name' => 'maryam-text-color']);
+        $setting->type = 'COLOR';
+        $setting->size = 4;
+        $setting->title =  $part->area_name . ' ' . $part->part .' text color';
+        $setting->save();
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_category';
+        $setting->value = Category::first()->id;
+        $setting->type = 'CATEGORY';
+        $setting->size = 4;
+        $setting->title =  $part->area_name . ' ' . $part->part .' category';
+        $setting->save();
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+        Setting::where('key',$part->area_name . '_' . $part->part.'_title')->first()?->delete();
+        Setting::where('key',$part->area_name . '_' . $part->part.'_color_bg')->first()?->delete();
+        Setting::where('key',$part->area_name . '_' . $part->part.'_color_text')->first()?->delete();
+        Setting::where('key',$part->area_name . '_' . $part->part.'_category')->first()?->delete();
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/index/MaryamCategoryProducts/MaryamCategoryProducts.scss

@@ -0,0 +1,79 @@
+.MaryamCategoryProducts {
+    // scss
+    position: relative;
+    background: var(--maryam-bg-color);
+    color: var(--maryam-text-color);
+    padding: 3rem 0;
+
+    h1{
+        font-size: 27px;
+        text-align: center;
+        font-weight: 200;
+        position: relative;
+        padding: 1rem;
+
+        &:after,&:before{
+            content: ' ';
+            border-bottom: 1px solid var(--maryam-text-color);
+            position: absolute;
+            top: 47% ;
+            z-index: 2;
+            width: 15%;
+            opacity: .5;
+        }
+
+        &:before{
+            left: 0;
+        }
+        &:after{
+            right: 0;
+        }
+    }
+
+    &:after{
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(0deg, var(--maryam-bg-color) 35%, transparent 100%);
+        height: 50%;
+        content: ' ';
+        pointer-events: none;
+    }
+
+
+    .maryam-row{
+        column-count: 4;
+        .maryam-item{
+            display: block;
+            margin-bottom: 1rem;
+        }
+    }
+
+
+    /*-1000px width*/
+    @media (max-width: 1000px) {
+        .maryam-row {
+            column-count: 3 ;
+        }
+    }
+
+    /*-768px width*/
+    @media (max-width: 768px) {
+        .maryam-row {
+            column-count: 2 ;
+        }
+
+        &:after{
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(0deg, var(--maryam-bg-color) 35%, transparent 100%);
+            height: 25%;
+            content: ' ';
+            pointer-events: none;
+        }
+    }
+}
+

resources/views/segments/index/NataliaCategories/NataliaCategories.blade.php

@@ -21,6 +21,7 @@
             </div>
             <div class="col-md-6 nata-bg"
                  style="background-image: url('{{$bg??asset('upload/images/'.$part->area_name . '.' . $part->part.'.webp')}}')">
+                <img src="{{asset('upload/images/'.$part->area_name . '.' . $part->part.'.webp')}}" alt="">
             </div>
         </div>
     </div>

resources/views/segments/index/NataliaCategories/NataliaCategories.scss

@@ -9,8 +9,9 @@
         top: -3rem;
         padding-bottom: 5rem;
         margin-bottom: -3rem;
-        *{
+        img{
-            opacity: 0;
+            width: 75%;
+            display: none;
         }
 
     }
@@ -41,4 +42,17 @@
             }
         }
     }
+
+    /*-768px width*/
+    @media (max-width: 768px) {
+        .nata-bg{
+            background-image: none !important;
+            padding-bottom: 0;
+
+            img{
+                display: block;
+                margin: auto;
+            }
+        }
+    }
 }

resources/views/segments/slider/ParallaxSlider/ParallaxSlider.php

@@ -3,6 +3,7 @@
 namespace Resources\Views\Segments;
 
 use App\Models\Part;
+use App\Models\Setting;
 use App\Models\Slider;
 
 class ParallaxSlider
@@ -12,12 +13,22 @@ class ParallaxSlider
         Slider::addData($part->area_name . '_' . $part->part . '_btn','View offer');
         Slider::addData($part->area_name . '_' . $part->part . '_link','/');
         Slider::addData($part->area_name . '_' . $part->part . '_subtitle','Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid aspernatur, commodi corporis cupiditate');
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area_name . '_' . $part->part.'_color';
+        $setting->value = '#000000';
+        $setting->data = json_encode(['name' => 'parallax-color']);
+        $setting->type = 'COLOR';
+        $setting->size = 12;
+        $setting->title =  $part->area_name . ' ' . $part->part .' text color';
+        $setting->save();
     }
     public static function onRemove(Part $part = null)
     {
         Slider::remData($part->area_name . '_' . $part->part . '_btn');
         Slider::remData($part->area_name . '_' . $part->part . '_link');
         Slider::remData($part->area_name . '_' . $part->part . '_subtitle');
+        Setting::where('key',$part->area_name . '_' . $part->part.'_color')->first()?->delete();
     }
     public static function onMount(Part $part = null)
     {

resources/views/segments/slider/ParallaxSlider/ParallaxSlider.scss

@@ -17,6 +17,7 @@
         justify-content: start;
         width: 100%;
         height: 750px;
+        color: var(--parallax-color);
     }
     // scss
     .parallax-slider {