diff --git a/app/Console/Commands/data/handle.dat b/app/Console/Commands/data/handle.dat
index ae7d4f7..2675606 100644
--- a/app/Console/Commands/data/handle.dat
+++ b/app/Console/Commands/data/handle.dat
@@ -1,16 +1,21 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
 
 class Handle
 {
-    public static function onAdd(){
+    public static function onAdd(Part $part = null)
+    {
 
     }
-    public static function onRemove(){
+    public static function onRemove(Part $part = null)
+    {
 
     }
-    public static function onMount(){
+    public static function onMount(Part $part = null)
+    {
 
     }
 }
diff --git a/app/Console/Commands/makePart.php b/app/Console/Commands/makePart.php
index 8ed9ca2..e0fcf12 100644
--- a/app/Console/Commands/makePart.php
+++ b/app/Console/Commands/makePart.php
@@ -2,9 +2,11 @@
 
 namespace App\Console\Commands;
 
-use App\Models\Theme;
+use App\Models\Area;
 use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\File;
+use Symfony\Component\Process\Process;
 
 class makePart extends Command
 {
@@ -15,14 +17,14 @@ class makePart extends Command
      *
      * @var string
      */
-    protected $signature = 'make:part {part} {section}';
+    protected $signature = 'make:part {part} {segment}';
 
     /**
      * The console command description.
      *
      * @var string
      */
-    protected $description = 'make theme part';
+    protected $description = 'make segment part';
 
     /**
      * Execute the console command.
@@ -30,8 +32,8 @@ class makePart extends Command
     public function handle()
     {
         //
-        $part = strtolower($this->argument('part'));
-        $section = strtolower($this->argument('section'));
+        $part = $this->argument('part');
+        $segment = strtolower($this->argument('segment'));
 
         // make detail
         $detail = [
@@ -45,13 +47,13 @@ class makePart extends Command
             'packages' => [],
         ];
         // check section
-        if (!in_array($section, Theme::$sections)) {
-             $this->error(__('Invalid theme section'));
+        if (!in_array($segment, Area::$allSegments)) {
+             $this->error(__('Invalid area segment'));
              return  -1;
         }
 
 
-        $folderPath = resource_path() . '/views/segments/' . $section . '/' . $part;
+        $folderPath = resource_path() . '/views/segments/' . $segment . '/' . ucfirst($part);
 
 
         // check is exists
@@ -64,7 +66,7 @@ class makePart extends Command
         File::makeDirectory($folderPath, 0755, true);
         File::makeDirectory($folderPath.'/assets', 0755, true);
 
-        $this->info('Directory created as: /theme/' . $section . '/' . $part);
+        $this->info('Directory created as: /segments/' . $segment . '/' . ucfirst($part));
 
         $handler = file_get_contents(__DIR__.'/data/handle.dat');
 
@@ -83,6 +85,9 @@ DOC;
         File::copy(__DIR__.'/data/screen.png',$folderPath .'/screenshot.png');
 
 
+
+        $process = new Process(['composer', 'dump-autoload']);
+        $process->setWorkingDirectory(base_path())->run();
         $this->info(__("Theme part created successfully: [blade, js, json, scss, php, assets, screenshot]"));
         return  0;
 
diff --git a/app/Helpers/Helper.php b/app/Helpers/Helper.php
index 3c36971..45c480a 100644
--- a/app/Helpers/Helper.php
+++ b/app/Helpers/Helper.php
@@ -327,6 +327,10 @@ function lastCrump()
                 $title = __('Trashed') . ' ' . __($routes[count($routes) - 2]);
                 $icon = 'ri-delete-bin-6-line';
                 break;
+            case 'design':
+                $title = __('Design') . ' ' . __($routes[count($routes) - 2]);
+                $icon = 'ri-paint-brush-line';
+                break;
             default:
                 $title = __('') . ' ' . __(ucfirst($routes[count($routes) - 1]));
                 $icon = 'ri-bubble-chart-line';
diff --git a/app/Http/Controllers/Admin/AreaController.php b/app/Http/Controllers/Admin/AreaController.php
new file mode 100644
index 0000000..36e086e
--- /dev/null
+++ b/app/Http/Controllers/Admin/AreaController.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use App\Models\Area;
+use App\Models\Part;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\File;
+
+class AreaController extends Controller
+{
+    //
+    public function index()
+    {
+        $areas = Area::all('name', 'icon');
+        return view('admin.areas.area-list', compact('areas'));
+    }
+
+    public function desgin(Area $area)
+    {
+
+        $valids = [];
+        foreach ($area->segment as $seg) {
+            $dirs = File::directories(resource_path() . '/views/segments/' . $seg);
+            foreach ($dirs as $dir) {
+                $temp = explode('/', $dir);
+                $valids[] = [
+                    'segment' => $temp[count($temp) - 2],
+                    'part' => $temp[count($temp) - 1],
+                    'data' => json_decode(file_get_contents($dir . '/' . $temp[count($temp) - 1] . '.json'), true)
+                ];
+            }
+        }
+
+        return view('admin.areas.area-design', compact('area', 'valids'));
+    }
+
+    /**
+     * screenshot segment
+     * @param $segment
+     * @param $part
+     * @return \Symfony\Component\HttpFoundation\BinaryFileResponse
+     */
+    public function image($segment, $part)
+    {
+        return response()->file(resource_path() . '/views/segments/' . $segment . '/' . $part . '/screenshot.png', ['Content-Type' => 'image/png']);
+    }
+
+    public function update(Request $request, Area $area)
+    {
+//        return $request->all();
+        foreach ($request->input('parts',[]) as $item) {
+            $data = json_decode($item);
+            if ($data->id == null){
+                // create
+                $part = new Part();
+                $part->area_id = $area->id;
+                $part->segment = $data->segment;
+                $part->part = $data->part;
+                $part->save();
+            }else{
+                $part = Part::whereId($data->id)->first();
+                $part->segment = $data->segment;
+                $part->part = $data->part;
+                $part->save();
+            }
+        }
+        logAdmin(__METHOD__,__CLASS__,$area->id);
+        return redirect()->back()->with(['message' => __('area :NAME of website updated',['NAME' => $area->name])]);
+    }
+}
diff --git a/app/Http/Controllers/Admin/GfxController.php b/app/Http/Controllers/Admin/GfxController.php
index 4b180b1..5178438 100644
--- a/app/Http/Controllers/Admin/GfxController.php
+++ b/app/Http/Controllers/Admin/GfxController.php
@@ -20,6 +20,7 @@ class GfxController extends Controller
             $g->value = $gfx;
             $g->save();
         }
+
         logAdmin(__METHOD__,__CLASS__,null);
         \Artisan::call('client');
         return redirect()->back()->with(['message' => __('GFX of website updated')]);
diff --git a/app/Models/Area.php b/app/Models/Area.php
new file mode 100644
index 0000000..74213fd
--- /dev/null
+++ b/app/Models/Area.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Area extends Model
+{
+//    use HasFactory;
+    public static $allSegments = [
+        'ads',
+        'attachment',
+        'attachments',
+        'attachmentsList',
+        'card',
+        'category',
+        'clip',
+        'clips',
+        'comments',
+        'compare',
+        'customer',
+        'floats',
+        'footer',
+        'galleries',
+        'gallery',
+        'group',
+        'groups',
+        'index',
+        'invoice',
+        'login',
+        'menu',
+        'parallax',
+        'preloader',
+        'product',
+        'products',
+        'questions',
+        'search',
+        'search',
+        'top',
+    ];
+
+    protected $casts = [
+        'segments',
+    ];
+
+    public function getSegmentAttribute()
+    {
+        return json_decode($this->valid_segments,true);
+    }
+
+
+    public function getRouteKeyName(){
+        return 'name';
+    }
+
+    public function parts(){
+        return $this->hasMany(Part::class);
+    }
+}
diff --git a/app/Models/Part.php b/app/Models/Part.php
new file mode 100644
index 0000000..4951087
--- /dev/null
+++ b/app/Models/Part.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Part extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Observers/PartObsever.php b/app/Observers/PartObsever.php
new file mode 100644
index 0000000..d4314c6
--- /dev/null
+++ b/app/Observers/PartObsever.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Observers;
+
+use App\Models\Part;
+
+class PartObsever
+{
+    /**
+     * Handle the Part "created" event.
+     */
+    public function created(Part $part): void
+    {
+        // run on add for new
+        $className= ucfirst($part->part);
+        $handle = "\\Resources\\Views\\Segments\\$className";
+        $handle::onAdd($part);
+    }
+
+    /**
+     * Handle the Part "updated" event.
+     */
+    public function updated(Part $part): void
+    {
+        // remove old part  add new part
+
+        if ($part->isDirty('part')){
+            $className = ucfirst($part->getOriginal('part'));
+            $handle = "\\Resources\\Views\\Segments\\$className";
+            $handle::onRemove($part);
+
+            $className = $part->part;
+            $className= ucfirst($part->part);
+            $handle = "\\Resources\\Views\\Segments\\$className";
+            $handle::onAdd($part);
+        }
+
+    }
+
+    /**
+     * Handle the Part "deleted" event.
+     */
+    public function deleted(Part $part): void
+    {
+        // remove part
+        $className= ucfirst($part->part);
+        $handle = "\\Resources\\Views\\Segments\\$className";
+        $handle::onRemove($part);
+    }
+
+    /**
+     * Handle the Part "restored" event.
+     */
+    public function restored(Part $part): void
+    {
+        //
+    }
+
+    /**
+     * Handle the Part "force deleted" event.
+     */
+    public function forceDeleted(Part $part): void
+    {
+        //
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 3f5cfb9..1a6b261 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -3,6 +3,10 @@
 namespace App\Providers;
 use App\Helpers\TDate;
 use App\Http\Middleware\Acl;
+use App\Models\Area;
+use App\Models\Part;
+use App\Observers\AreaObsever;
+use App\Observers\PartObsever;
 use Carbon\Carbon;
 use Illuminate\Pagination\Paginator;
 use Illuminate\Support\Facades\Blade;
@@ -44,6 +48,8 @@ class AppServiceProvider extends ServiceProvider
             }
         });
 
+        Part::observe(PartObsever::class);
+
 
     }
 }
diff --git a/composer.json b/composer.json
index ea33ab7..f6aefcb 100644
--- a/composer.json
+++ b/composer.json
@@ -43,6 +43,9 @@
         },
         "files": [
             "app/Helpers/Helper.php"
+        ],
+        "classmap": [
+            "resources/views/segments"
         ]
     },
     "autoload-dev": {
diff --git a/database/migrations/2024_07_04_050212_create_areas_table.php b/database/migrations/2024_07_04_050212_create_areas_table.php
new file mode 100644
index 0000000..191b562
--- /dev/null
+++ b/database/migrations/2024_07_04_050212_create_areas_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('areas', function (Blueprint $table) {
+            $table->id();
+            $table->string('name')->unique();
+            $table->tinyInteger('max')->default(1);
+            $table->string('icon')->nullable();
+            $table->json('valid_segments');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('areas');
+    }
+};
diff --git a/database/migrations/2024_07_04_053952_create_parts_table.php b/database/migrations/2024_07_04_053952_create_parts_table.php
new file mode 100644
index 0000000..486553f
--- /dev/null
+++ b/database/migrations/2024_07_04_053952_create_parts_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('parts', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('area_id');
+            $table->integer('sort')->default(0);
+            $table->string('segment');
+            $table->string('part');
+            $table->json('data')->default('[]');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('parts');
+    }
+};
diff --git a/database/seeders/AreaSeeder.php b/database/seeders/AreaSeeder.php
new file mode 100644
index 0000000..b7b610e
--- /dev/null
+++ b/database/seeders/AreaSeeder.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Area;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class AreaSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        //
+        $areas = [
+            [
+                'name' => 'preloader',
+                'valid_segments' => json_encode(
+                    ['preloader']
+                ),
+                'max' => 1,
+                'icon' => 'ri-loader-2-line',
+            ],
+            [
+                'name' => 'top',
+                'valid_segments' => json_encode(
+                    ['top']
+                ),
+                'max' => 1,
+                'icon' => 'ri-layout-top-2-line',
+            ],
+        ];
+        foreach ($areas as $area){
+            $a = new Area();
+            $a->name = $area['name'];
+            $a->max = $area['max'];
+            $a->valid_segments = $area['valid_segments'];
+            $a->icon = $area['icon'];
+            $a->save();
+        }
+    }
+}
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 38cb4c8..3b5970a 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -34,6 +34,8 @@ class DatabaseSeeder extends Seeder
                 CommentSeeder::class,
                 SettingSeeder::class,
                 GfxSeeder::class,
+                AreaSeeder::class,
+                PartSeeder::class,
             ]
         );
     }
diff --git a/database/seeders/PartSeeder.php b/database/seeders/PartSeeder.php
new file mode 100644
index 0000000..f8919c5
--- /dev/null
+++ b/database/seeders/PartSeeder.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Area;
+use App\Models\Part;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class PartSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        //
+
+        $part = new Part();
+        $part->segment = 'preloader';
+        $part->part = 'PreloaderImage';
+        $part->area_id = Area::where('name','preloader')->first()->id;
+        $part->save();
+
+    }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index a04354f..c6b371b 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -90,6 +90,9 @@ app.component('morph-selector', MorphSelector);
 import Gfxer from "./components/Gfxer.vue";
 app.component('gfxer', Gfxer);
 
+import AreaDesginer from "./components/AreaDesginer.vue";
+app.component('area-designer', AreaDesginer);
+
 
 /**
  * The following block of code may be used to automatically register your
diff --git a/resources/js/components/AreaDesginer.vue b/resources/js/components/AreaDesginer.vue
new file mode 100644
index 0000000..775aa18
--- /dev/null
+++ b/resources/js/components/AreaDesginer.vue
@@ -0,0 +1,83 @@
+<template>
+    <div id="area-designer">
+        <div class="card mt-2" v-for="(part,p) in partsData">
+            <div class="card-header">
+                Part {{p+1}}
+            </div>
+            <div class="part-body">
+                <div class="row">
+                    <template v-for="(valid,i) in valids">
+                    <div @click="changePart(p,valid.segment,valid.part)" :class="`col-md-3 `+(valid.data.name == part.part?'selected-part':'can-select')" >
+                        <img class="img-fluid mt-2" :src="imageLink+'/'+valid.segment+'/'+valid.part" alt="screeshot">
+                        {{valid.part}} [v{{valid.data.version}}]
+                    </div>
+                    </template>
+                </div>
+                <input type="hidden" name="parts[]" :value="JSON.stringify(part)" class="form-control">
+            </div>
+        </div>
+        <div v-if="parts.length < parseInt(area.max)" class="p-2">
+            <div class="btn btn-primary w-100" @click="addPart">
+                <i class="ri-add-line"></i>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "area-designer",
+    components: {},
+    data: () => {
+        return {
+            partsData:[],
+        }
+    },
+    props: {
+        valids:{
+            default:[],
+            type: Array,
+        },
+        parts:{
+            default:[],
+            type: Array,
+        },
+        area:{
+            required: true,
+            type: Object,
+        },
+        imageLink:{
+            required: true,
+        }
+    },
+    mounted() {
+        this.partsData = this.parts;
+    },
+    computed: {},
+    methods: {
+        changePart(p,segment,part){
+            this.partsData[p].segment = segment;
+            this.partsData[p].part = part;
+        },
+        addPart(){
+            this.partsData.push({
+                id: null,
+                segment: this.valids[0].segment,
+                part: this.valids[0].part,
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#area-designer {
+
+}
+.selected-part{
+    background: #32CD3233;
+}
+.can-select{
+    cursor: pointer;
+}
+</style>
diff --git a/resources/sass/client.scss b/resources/sass/client.scss
index 3f08df3..5b7d15e 100644
--- a/resources/sass/client.scss
+++ b/resources/sass/client.scss
@@ -2,11 +2,11 @@
 // IF YOU WANT ADD ANY CODE CREATE NEW SCSS INTO client-custom
 :root{
 --xshop-background:#eeeeee;
---xshop-primary:#81c700;
---xshop-secondary:#00eeff;
+--xshop-primary:#6e0000;
+--xshop-secondary:#ff0000;
 --xshop-text:#111111;
 --border-radius:7px;
---xshop-shadow:5px 10px 31px #ff00f7;
+--xshop-shadow:2px 2px 4px #777777;
 }
 
 @import "client-custom/assetsNode";
diff --git a/resources/sass/panel/_common.scss b/resources/sass/panel/_common.scss
index 6f8be13..e74eda6 100644
--- a/resources/sass/panel/_common.scss
+++ b/resources/sass/panel/_common.scss
@@ -178,3 +178,19 @@ a.btn,a.action-btn,a.circle-btn{
 }
 
 
+.area-list-item{
+    background: #00000022;
+    height: 125px;
+    text-align: center;
+    display: block;
+    color: $text-muted;
+
+    &:hover{
+        color: lighten($primary-color-panel,10);
+    }
+    i{
+        font-size: 45px;
+        display: block;
+        margin: 1rem auto;
+    }
+}
diff --git a/resources/views/admin/areas/area-design.blade.php b/resources/views/admin/areas/area-design.blade.php
new file mode 100644
index 0000000..bbb8e5a
--- /dev/null
+++ b/resources/views/admin/areas/area-design.blade.php
@@ -0,0 +1,45 @@
+@extends('layouts.app')
+
+@section('title')
+    {{__("Design :AREA",['AREA' => $area->name])}}
+@endsection
+
+@section('content')
+
+    <form action="{{route('admin.area.update',$area->name)}}" method="post">
+        @csrf
+        <div class="general-form mb-5">
+            <h1>
+                {{__("Design :AREA",['AREA' => $area->name])}} <i class="{{$area->icon}}"></i>
+            </h1>
+
+            <area-designer
+                image-link="{{route('admin.area.image',['',''])}}"
+                :parts='@json($area->parts)'
+                :valids='@json($valids)'
+                :area='@json($area)'
+            ></area-designer>
+            {{--        <div class="row">--}}
+            {{--            @foreach($valids as $valid)--}}
+            {{--                <div class="col-md-3">--}}
+            {{--                    <img class="img-fluid" src="{{route('admin.area.image',[$valid['segment'],$valid['part']])}}" alt="{{$valid['segment'].'.'.$valid['part']}}">--}}
+            {{--                    <h5 class="mt-2 text-center">--}}
+            {{--                        {{$valid['data']['name']}} [v{{$valid['data']['version']}}]--}}
+            {{--                    </h5>--}}
+            {{--                </div>--}}
+            {{--            @endforeach--}}
+            {{--        </div>--}}
+        </div>
+        <button
+            data-link="{{getRoute('sort-save')}}"
+            id="save-sort"
+            class="action-btn circle-btn"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            data-bs-custom-class="custom-tooltip"
+            data-bs-title="{{__("Save")}}"
+        >
+            <i class="ri-save-2-line"></i>
+        </button>
+    </form>
+@endsection
diff --git a/resources/views/admin/areas/area-list.blade.php b/resources/views/admin/areas/area-list.blade.php
new file mode 100644
index 0000000..ca5dd1b
--- /dev/null
+++ b/resources/views/admin/areas/area-list.blade.php
@@ -0,0 +1,17 @@
+@extends('layouts.app')
+
+@section('title')
+    {{__("Area desgin")}}
+@endsection
+@section('content')
+    <div class="row">
+        @foreach($areas as $area)
+            <div class="col-md-4">
+                <a class="area-list-item" href="{{route('admin.area.design',$area->name)}}">
+                    <i class="{{$area->icon}}"></i>
+                    {{__(ucfirst($area->name))}}
+                </a>
+            </div>
+        @endforeach
+    </div>
+@endsection
diff --git a/resources/views/components/panel-side-navbar.blade.php b/resources/views/components/panel-side-navbar.blade.php
index 91ba02f..b6274b3 100644
--- a/resources/views/components/panel-side-navbar.blade.php
+++ b/resources/views/components/panel-side-navbar.blade.php
@@ -135,9 +135,9 @@
                     </a>
                 </li>
                 <li>
-                    <a href="">
+                    <a href="{{route('admin.area.index')}}">
                         <i class="ri-paint-brush-line"></i>
-                        {{__("Design")}}
+                        {{__("Area design")}}
                     </a>
                 </li>
             </ul>
diff --git a/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.blade.php b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.blade.php
new file mode 100644
index 0000000..000f18c
--- /dev/null
+++ b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.blade.php
@@ -0,0 +1 @@
+<div id='PreloaderCircle'></div>
\ No newline at end of file
diff --git a/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.js b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.json b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.json
new file mode 100644
index 0000000..2e3754a
--- /dev/null
+++ b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.json
@@ -0,0 +1,10 @@
+{
+    "name": "PreloaderCircle",
+    "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": []
+}
\ No newline at end of file
diff --git a/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.php b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.php
new file mode 100644
index 0000000..5b501ed
--- /dev/null
+++ b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class PreloaderCircle
+{
+    public static function onAdd(Part $part = null)
+    {
+        \Log::info('added '.$part->part.' on '.$part->segment);
+    }
+    public static function onRemove(Part $part = null)
+    {
+        \Log::info('remove '.$part->part.' on '.$part->segment);
+    }
+    public static function onMount(Part $part = null)
+    {
+        \Log::info('monted '.$part->part.' on '.$part->segment);
+    }
+}
diff --git a/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.scss b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.scss
new file mode 100644
index 0000000..2f297af
--- /dev/null
+++ b/resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.scss
@@ -0,0 +1,3 @@
+#PreloaderCircle {
+    // scss
+}
\ No newline at end of file
diff --git a/resources/views/segments/preloader/PreloaderCircle/screenshot.png b/resources/views/segments/preloader/PreloaderCircle/screenshot.png
new file mode 100644
index 0000000..c83bd13
Binary files /dev/null and b/resources/views/segments/preloader/PreloaderCircle/screenshot.png differ
diff --git a/resources/views/segments/preloader/PreloaderImage/PreloaderImage.blade.php b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.blade.php
new file mode 100644
index 0000000..46b9d4b
--- /dev/null
+++ b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.blade.php
@@ -0,0 +1 @@
+<div id='PreloaderImage'></div>
\ No newline at end of file
diff --git a/resources/views/segments/preloader/PreloaderImage/PreloaderImage.js b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/segments/preloader/PreloaderImage/PreloaderImage.json b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.json
new file mode 100644
index 0000000..d4cd796
--- /dev/null
+++ b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.json
@@ -0,0 +1,10 @@
+{
+    "name": "PreloaderImage",
+    "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": []
+}
\ No newline at end of file
diff --git a/resources/views/segments/preloader/PreloaderImage/PreloaderImage.php b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.php
new file mode 100644
index 0000000..b1418ae
--- /dev/null
+++ b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class PreloaderImage
+{
+    public static function onAdd(Part $part = null)
+    {
+        \Log::info('added '.$part->part.' on '.$part->segment);
+    }
+    public static function onRemove(Part $part = null)
+    {
+        \Log::info('remove '.$part->part.' on '.$part->segment);
+    }
+    public static function onMount(Part $part = null)
+    {
+        \Log::info('monted '.$part->part.' on '.$part->segment);
+    }
+}
diff --git a/resources/views/segments/preloader/PreloaderImage/PreloaderImage.scss b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.scss
new file mode 100644
index 0000000..1b220c5
--- /dev/null
+++ b/resources/views/segments/preloader/PreloaderImage/PreloaderImage.scss
@@ -0,0 +1,3 @@
+#PreloaderImage {
+    // scss
+}
\ No newline at end of file
diff --git a/resources/views/segments/preloader/PreloaderImage/screenshot.png b/resources/views/segments/preloader/PreloaderImage/screenshot.png
new file mode 100644
index 0000000..c83bd13
Binary files /dev/null and b/resources/views/segments/preloader/PreloaderImage/screenshot.png differ
diff --git a/routes/web.php b/routes/web.php
index 1ea2132..1d13e88 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -272,18 +272,24 @@ Route::prefix(config('app.panel.prefix'))->name('admin.')->group(
                         Route::post('update', [\App\Http\Controllers\Admin\GfxController::class, "update"])->name('update');
                     }
                 );
+                Route::prefix('area')->name('area.')->group(
+                    function () {
+                        Route::get('index', [\App\Http\Controllers\Admin\AreaController::class, "index"])->name('index');
+                        Route::get('design/{area}', [\App\Http\Controllers\Admin\AreaController::class, "desgin"])->name('design');
+                        Route::get('image/{segment}/{part}', [\App\Http\Controllers\Admin\AreaController::class, "image"])->name('image');
+//                        Route::post('store', [\App\Http\Controllers\Admin\SettingController::class, "store"])->name('store');
+                        Route::post('update/{area}', [\App\Http\Controllers\Admin\AreaController::class, "update"])->name('update');
+                    }
+                );
 
             });
 
     });
 
 Route::get('test',function (){
-    $c = new \App\Models\Contact();
-    $c->name = 'mamali';
-    $c->email = 'mamali@yahoo.com';
-    $c->mobile = '091212344557';
-    $c->body = 'test test contact';
-    $c->subject = ' this a subject';
-    $c->save();
-   return \App\Helpers\PersianFaker::color();
+
+//    return \Resources\Views\Segments\PreloaderCircle::onAdd();
+
+    Log::info('--test--');
 });
+