diff --git a/resources/views/segments/groups/AraMainGroups/AraMainGroups.blade.php b/resources/views/segments/groups/AraMainGroups/AraMainGroups.blade.php
new file mode 100644
index 0000000..b350462
--- /dev/null
+++ b/resources/views/segments/groups/AraMainGroups/AraMainGroups.blade.php
@@ -0,0 +1,34 @@
+<section class='AraMainGroups'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{getSetting($data->area->name.'_'.$data->part.'_title')}}
+        </h1>
+        <p>
+            {{getGroupBySetting($data->area->name.'_'.$data->part.'_group')->subtitle}}
+        </p>
+        <div class="ara-row">
+            @foreach(getSubGroupSetting($data->area->name.'_'.$data->part.'_group') as $group)
+                <div class="ara-group">
+                    <a href="{{$group->webUrl()}}">
+
+                        <img src="{{$group->imgUrl()}}" class="img-fluid" alt="">
+                        <div class="ara-data">
+                            <h3>
+                                {{$group->name}}
+                            </h3>
+                            <p>
+                                {{$group->subtitle}}
+                            </p>
+                        </div>
+                    </a>
+                </div>
+            @endforeach
+        </div>
+
+        <div class="mt-3 text-center">
+            <a href="{{getGroupBySetting($data->area->name.'_'.$data->part.'_group')->webUrl()}}" class="btn btn-outline-primary">
+                {{getSetting($data->area->name.'_'.$data->part.'_title')}}
+            </a>
+        </div>
+    </div>
+</section>
diff --git a/resources/views/segments/groups/AraMainGroups/AraMainGroups.js b/resources/views/segments/groups/AraMainGroups/AraMainGroups.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/segments/groups/AraMainGroups/AraMainGroups.json b/resources/views/segments/groups/AraMainGroups/AraMainGroups.json
new file mode 100644
index 0000000..002ffe0
--- /dev/null
+++ b/resources/views/segments/groups/AraMainGroups/AraMainGroups.json
@@ -0,0 +1,10 @@
+{
+    "name": "AraMainGroups",
+    "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/groups/AraMainGroups/AraMainGroups.php b/resources/views/segments/groups/AraMainGroups/AraMainGroups.php
new file mode 100644
index 0000000..cd5e826
--- /dev/null
+++ b/resources/views/segments/groups/AraMainGroups/AraMainGroups.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Group;
+use App\Models\Part;
+use App\Models\Setting;
+
+class AraMainGroups
+{
+    public static function onAdd(Part $part = null)
+    {
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area->name . '_' . $part->part.'_title';
+        $setting->value = __("Groups");
+        $setting->size = 6;
+        $setting->type = 'TEXT';
+//        $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
+        $setting->title =  $part->area->name . ' ' . $part->part. ' title';
+        $setting->save();
+
+
+        $setting = new Setting();
+        $setting->section = 'theme';
+        $setting->key = $part->area->name . '_' . $part->part.'_group';
+        $setting->value = Group::first()->id;
+        $setting->size = 6;
+        $setting->type = 'GROUP';
+//        $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
+        $setting->title =  $part->area->name . ' ' . $part->part. ' group';
+        $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.'_group')->first()?->delete();
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}
diff --git a/resources/views/segments/groups/AraMainGroups/AraMainGroups.scss b/resources/views/segments/groups/AraMainGroups/AraMainGroups.scss
new file mode 100644
index 0000000..eb50bf5
--- /dev/null
+++ b/resources/views/segments/groups/AraMainGroups/AraMainGroups.scss
@@ -0,0 +1,84 @@
+.AraMainGroups {
+    // scss
+    padding: 3rem 0;
+
+    h1{
+        font-size: 27px;
+        margin-bottom: 1rem;
+        font-weight: 400;
+    }
+
+    .ara-row{
+        column-count: 3;
+    }
+
+    .ara-group{
+        overflow: hidden;
+        margin-bottom: 1rem;
+        position: relative;
+        border-radius: var(--xshop-border-radius);
+
+
+        img{
+            transition: 400ms;
+            border-radius: var(--xshop-border-radius);
+        }
+
+        .ara-data{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem;
+            color: white;
+            background: linear-gradient(0deg, rgb(30, 30, 30) 0%, rgba(0,212,255,0) 100%);
+            transition: 400ms;
+            z-index: 9;
+
+
+            &:before{
+                content: ' ';
+                width: 0;
+                bottom: 1rem;
+                inset-inline-start: 1rem;
+                height: 2px;
+                background: var(--xshop-primary);
+                z-index: 9;
+                position: absolute;
+                transition: 400ms;
+            }
+        }
+
+        &:hover{
+            img{
+                transform: scale(1.2);
+            }
+            .ara-data{
+                padding-top: 2rem;
+                &:before{
+                    width: 70%;
+                }
+            }
+        }
+    }
+
+    /*-1000px width*/
+    @media (max-width: 1000px) {
+        .ara-row{
+            column-count: 2 !important;
+        }
+    }
+}
+
+/*-600px width*/
+@media (max-width: 600px) {
+    .AraMainGroups{
+        h3{
+            font-size: 17px;
+            font-weight: 700;
+        }
+        p{
+            display: none;
+        }
+    }
+}
diff --git a/resources/views/segments/groups/AraMainGroups/screenshot.png b/resources/views/segments/groups/AraMainGroups/screenshot.png
new file mode 100644
index 0000000..8d6a551
Binary files /dev/null and b/resources/views/segments/groups/AraMainGroups/screenshot.png differ