Initial commit

resources/css/app.css

@@ -0,0 +1,12 @@
+
+
+@import url('./style.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+
+
+ 

resources/css/fonts.css

@@ -0,0 +1,38 @@
+
+
+@font-face {
+    font-family: "YekanBakh";
+    src: url("../fonts/YekanBakhFaNum-Light.woff2") format("woff2");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "YekanBakh";
+    src: url("../fonts/YekanBakhFaNum-Regular.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "YekanBakh";
+    src: url("../fonts/YekanBakhFaNum-SemiBold.woff2") format("woff2");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "YekanBakh";
+    src: url("../fonts/YekanBakhFaNum-Bold.woff2") format("woff2");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "YekanBakh";
+    src: url("../fonts/YekanBakhFaNum-ExtraBold.woff2") format("woff2");
+    font-weight: 800;
+    font-style: normal;
+}
+
+ 

resources/css/iransans.css

@@ -0,0 +1,13 @@
+@font-face {
+
+	font-family: iransans;
+
+	font-style: normal;
+
+	font-weight: bold;
+
+	src: url('../fonts/IRANSansX-Bold.woff') format('woff'),
+
+}
+
+

resources/css/iransansfa.css

@@ -0,0 +1,71 @@
+@font-face {
+
+	font-family: iransansfa;
+
+	font-style: normal;
+
+	font-weight: 100;
+
+	src: url('../fonts/woff/IRANSansXFaNum-Thin.woff') format('woff'),   
+
+	url('../fonts/woff2/IRANSansXFaNum-Thin.woff2') format('woff2');		
+
+}
+
+
+
+@font-face {
+
+	font-family: iransansfa;
+
+	font-style: normal;
+
+	font-weight: 200;
+
+	src: url('../fonts/woff/IRANSansXFaNum-UltraLight.woff') format('woff'),   
+
+	url('../fonts/woff2/IRANSansXFaNum-UltraLight.woff2') format('woff2');	
+
+}
+
+
+
+@font-face {
+
+	font-family: iransansfa;
+
+	font-style: normal;
+
+	font-weight: 300;
+
+	src: url('../fonts/woff/IRANSansXFaNum-Light.woff') format('woff'),   
+
+	url('../fonts/woff2/IRANSansXFaNum-Light.woff2') format('woff2');		 
+
+}
+
+
+
+@font-face {
+
+	font-family: iransansfa;
+
+	font-style: normal;
+
+	font-weight: 500;
+
+	src: url('../fonts/woff/IRANSansXFaNum-Medium.woff') format('woff'),   
+
+	url('../fonts/woff2/IRANSansXFaNum-Medium.woff2') format('woff2');		 
+
+}
+
+
+
+@font-face {
+
+	font-family: iransansfa;
+
+	font-style: normal;
+
+	font-weight: 600;

resources/css/iranyekan.css

@@ -0,0 +1,87 @@
+@font-face {
+
+	font-family: iranyekan;
+
+	font-style: normal;
+
+	font-weight: bold;
+
+	src: url('../fonts/eot/iranyekanwebbold.eot');
+
+	src: url('../fonts/eot/iranyekanwebbold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+
+		 url('../fonts/woff/iranyekanwebbold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+
+		 url('../fonts/woff2/iranyekanwebbold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+
+		 url('../fonts/ttf/iranyekanwebbold.ttf') format('truetype');
+
+}
+
+
+
+@font-face {
+
+	font-family: iranyekan;
+
+	font-style: normal;
+
+	font-weight: 100;
+
+	src: url('../fonts/eot/iranyekanwebthin.eot');
+
+	src: url('../fonts/eot/iranyekanwebthin.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+
+		 url('../fonts/woff/iranyekanwebthin.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+
+		 url('../fonts/woff2/iranyekanwebthin.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+
+		 url('../fonts/ttf/iranyekanwebthin.ttf') format('truetype');
+
+}
+
+
+
+@font-face {
+
+	font-family: iranyekan;
+
+	font-style: normal;
+
+	font-weight: 300;
+
+	src: url('../fonts/eot/iranyekanweblight.eot');
+
+	src: url('../fonts/eot/iranyekanweblight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+
+		 url('../fonts/woff/iranyekanweblight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+
+		 url('../fonts/woff2/iranyekanweblight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
+
+		 url('../fonts/ttf/iranyekanweblight.ttf') format('truetype');
+
+}
+
+
+
+@font-face {
+
+	font-family: iranyekan;
+
+	font-style: normal;
+
+	font-weight: normal;
+
+	src: url('../fonts/eot/iranyekanwebregular.eot');
+
+	src: url('../fonts/eot/iranyekanwebregular.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+
+		 url('../fonts/woff/iranyekanwebregular.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+
+		 url('../fonts/woff2/iranyekanwebregular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
+
+		 url('../fonts/ttf/iranyekanwebregular.ttf') format('truetype');
+
+}
+
+

resources/css/iranyekanfa.css

@@ -0,0 +1,79 @@
+@font-face {
+
+	font-family: iranyekanfa;
+
+	font-style: normal;
+
+	font-weight: bold;
+
+	src: url('../fonts/eot/iranyekanwebboldfanum.eot');
+
+	src: url('../fonts/eot/iranyekanwebboldfanum.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+
+		 url('../fonts/woff/iranyekanwebboldfanum.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+
+		 url('../fonts/ttf/iranyekanwebboldfanum.ttf') format('truetype');
+
+}
+
+
+
+@font-face {
+
+	font-family: iranyekanfa;
+
+	font-style: normal;
+
+	font-weight: 100;
+
+	src: url('../fonts/eot/iranyekanwebthinfanum.eot');
+
+	src: url('../fonts/eot/iranyekanwebthinfanum.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+
+		 url('../fonts/woff/iranyekanwebthinfanum.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+
+		 url('../fonts/ttf/iranyekanwebthinfanum.ttf') format('truetype');
+
+}
+
+
+
+@font-face {
+
+	font-family: iranyekanfa;
+
+	font-style: normal;
+
+	font-weight: 300;
+
+	src: url('../fonts/eot/iranyekanweblightfanum.eot');
+
+	src: url('../fonts/eot/iranyekanweblightfanum.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+
+		 url('../fonts/woff/iranyekanweblightfanum.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+
+		 url('../fonts/ttf/iranyekanweblightfanum.ttf') format('truetype');
+
+}
+
+
+
+@font-face {
+
+	font-family: iranyekanfa;
+
+	font-style: normal;
+
+	font-weight: normal;
+
+	src: url('../fonts/eot/iranyekanwebregularfanum.eot');
+
+	src: url('../fonts/eot/iranyekanwebregularfanum.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
+
+		 url('../fonts/woff/iranyekanwebregularfanum.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+
+		 url('../fonts/ttf/iranyekanwebregularfanum.ttf') format('truetype');
+
+}
+
+

resources/css/style.css

@@ -0,0 +1,654 @@
+
+
+@import url(./iransans.css);
+
+path{stroke:#fff;cursor:pointer;transition:fill 250ms;}
+
+path:hover{fill:#F3F4F6;}
+
+text{font-size:.8em;text-transform:uppercase;letter-spacing:.5px;}
+
+polyline{fill:none;stroke:#0d0d0d;stroke-width:2px;stroke-dasharray:5px;}
+
+body {
+
+    font-family: 'iransans', sans-serif;
+
+}
+
+.menu-link {
+
+    font-weight: 500;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(75 85 99 / var(--tw-text-opacity));
+
+    transition-property: all;
+
+    transition-duration: .2s;
+
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+
+}
+
+
+
+/*! CSS Used from: https://ahrominvest.ir/page/css/index.93d10874.css */
+
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
+
+:before,:after{--tw-content:"";}
+
+a{color:inherit;text-decoration:inherit;}
+
+:disabled{cursor:default;}
+
+*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
+
+.btn{height:3.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:1rem;padding-left:2rem;padding-right:2rem;font-size:.875rem;line-height:1.25rem;font-weight:600;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.4, 0, .2, 1);}
+
+.btn:hover{cursor:pointer;}
+
+.btn:focus{outline:2px solid transparent;outline-offset:2px;}
+
+.flex{display:flex;}
+
+.w-auto{width:auto;}
+
+.items-center{align-items:center;}
+
+.justify-center{justify-content:center;}
+
+.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}
+
+/*! CSS Used from: https://ahrominvest.ir/build/assets/app-c7c495d7.css */
+
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
+
+:before,:after{--tw-content:"";}
+
+a{color:inherit;text-decoration:inherit;}
+
+:disabled{cursor:default;}
+
+*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
+
+.flex{display:flex;}
+
+.w-auto{width:auto;}
+
+.items-center{align-items:center;}
+
+.justify-center{justify-content:center;}
+
+.bg-ahrom{--tw-bg-opacity:1;background-color:rgb(8 70 66 / var(--tw-bg-opacity));}
+
+.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}
+
+
+
+
+
+/*! CSS Used from: https://ahrominvest.ir/page/css/index.93d10874.css */
+
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
+
+:before,:after{--tw-content:"";}
+
+a{color:inherit;text-decoration:inherit;}
+
+:disabled{cursor:default;}
+
+*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
+
+.btn{height:3.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:1rem;padding-left:2rem;padding-right:2rem;font-size:.875rem;line-height:1.25rem;font-weight:600;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.4, 0, .2, 1);}
+
+.btn:hover{cursor:pointer;}
+
+.btn:focus{outline:2px solid transparent;outline-offset:2px;}
+
+.flex{display:flex;}
+
+.w-full{width:100%;}
+
+.items-center{align-items:center;}
+
+.justify-center{justify-content:center;}
+
+.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}
+
+.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}
+
+.hover\:opacity-90:hover{opacity:.9;}
+
+@media (min-width: 640px){
+
+.sm\:w-auto{width:auto;}
+
+}
+
+/*! CSS Used from: https://ahrominvest.ir/build/assets/app-c7c495d7.css */
+
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
+
+:before,:after{--tw-content:"";}
+
+a{color:inherit;text-decoration:inherit;}
+
+:disabled{cursor:default;}
+
+*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
+
+.flex{display:flex;}
+
+.w-full{width:100%;}
+
+.items-center{align-items:center;}
+
+.justify-center{justify-content:center;}
+
+.bg-ahrom{--tw-bg-opacity:1;background-color:rgb(8 70 66 / var(--tw-bg-opacity));}
+
+.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}
+
+.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);}
+
+.hover\:opacity-90:hover{opacity:.9;}
+
+@media (min-width: 640px){
+
+.sm\:w-auto{width:auto;}
+
+}
+
+
+
+
+
+ .text-ahrom{
+
+    color: rgb(8 70 66 / 1) ;
+
+ }
+
+
+
+
+
+ /*! CSS Used from: https://ahrominvest.ir/page/css/index.93d10874.css */
+
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
+
+:before,:after{--tw-content:"";}
+
+h2{font-size:inherit;font-weight:inherit;}
+
+a{color:inherit;text-decoration:inherit;}
+
+h2,p{margin:0;}
+
+ul{list-style:none;margin:0;padding:0;}
+
+:disabled{cursor:default;}
+
+img,svg{display:block;vertical-align:middle;}
+
+img{max-width:100%;height:auto;}
+
+*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
+
+.relative{position:relative;}
+
+.z-10{z-index:10;}
+
+.mx-auto{margin-left:auto;margin-right:auto;}
+
+.mb-3{margin-bottom:.75rem;}
+
+.flex{display:flex;}
+
+.h-6{height:1.5rem;}
+
+.w-6{width:1.5rem;}
+
+.max-w-5xl{max-width:64rem;}
+
+.basis-1\/3{flex-basis:33.333333%;}
+
+.flex-row-reverse{flex-direction:row-reverse;}
+
+.flex-col{flex-direction:column;}
+
+.flex-col-reverse{flex-direction:column-reverse;}
+
+.items-center{align-items:center;}
+
+.justify-end{justify-content:flex-end;}
+
+.justify-center{justify-content:center;}
+
+.justify-between{justify-content:space-between;}
+
+.gap-4{gap:1rem;}
+
+.gap-6{gap:1.5rem;}
+
+.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem;}
+
+.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse));}
+
+.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse));}
+
+.rounded-lg{border-radius:.5rem;}
+
+.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));}
+
+.bg-secondary{--tw-bg-opacity:1;background-color:rgb(31 30 43 / var(--tw-bg-opacity));}
+
+.p-6{padding:1.5rem;}
+
+.p-1{padding:.25rem;}
+
+.pb-10{padding-bottom:2.5rem;}
+
+.pt-10{padding-top:2.5rem;}
+
+.text-center{text-align:center;}
+
+.text-sm{font-size:.875rem;line-height:1.25rem;}
+
+.font-semibold{font-weight:600;}
+
+.leading-6{line-height:1.5rem;}
+
+.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249 / var(--tw-text-opacity));}
+
+.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity));}
+
+.rtl{direction:rtl;}
+
+.hover\:text-slate-100:hover{--tw-text-opacity:1;color:rgb(241 245 249 / var(--tw-text-opacity));}
+
+@media (min-width: 1024px){
+
+.lg\:flex-row{flex-direction:row;}
+
+.lg\:flex-row-reverse{flex-direction:row-reverse;}
+
+.lg\:items-baseline{align-items:baseline;}
+
+.lg\:justify-around{justify-content:space-around;}
+
+.lg\:p-10{padding:2.5rem;}
+
+.lg\:px-0{padding-left:0;padding-right:0;}
+
+}
+
+/*! CSS Used from: https://ahrominvest.ir/build/assets/app-c7c495d7.css */
+
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
+
+:before,:after{--tw-content:"";}
+
+h2{font-size:inherit;font-weight:inherit;}
+
+a{color:inherit;text-decoration:inherit;}
+
+h2,p{margin:0;}
+
+ul{list-style:none;margin:0;padding:0;}
+
+:disabled{cursor:default;}
+
+img,svg{display:block;vertical-align:middle;}
+
+img{max-width:100%;height:auto;}
+
+*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
+
+.relative{position:relative;}
+
+.z-10{z-index:10;}
+
+.mx-auto{margin-left:auto;margin-right:auto;}
+
+.mb-3{margin-bottom:.75rem;}
+
+.flex{display:flex;}
+
+.h-20{height:5rem;}
+
+.h-6{height:1.5rem;}
+
+.h-auto{height:auto;}
+
+.w-20{width:5rem;}
+
+.w-6{width:1.5rem;}
+
+.max-w-5xl{max-width:64rem;}
+
+.basis-1\/3{flex-basis:33.333333%;}
+
+.flex-row-reverse{flex-direction:row-reverse;}
+
+.flex-col{flex-direction:column;}
+
+.flex-col-reverse{flex-direction:column-reverse;}
+
+.items-start{align-items:flex-start;}
+
+.items-center{align-items:center;}
+
+.justify-end{justify-content:flex-end;}
+
+.justify-center{justify-content:center;}
+
+.justify-between{justify-content:space-between;}
+
+.gap-4{gap:1rem;}
+
+.gap-6{gap:1.5rem;}
+
+.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem;}
+
+.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)));}
+
+.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse));}
+
+.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse));}
+
+.space-x-reverse>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1;}
+
+.rounded-lg{border-radius:.5rem;}
+
+.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));}
+
+.p-1{padding:.25rem;}
+
+.p-6{padding:1.5rem;}
+
+.pb-10{padding-bottom:2.5rem;}
+
+.pt-10{padding-top:2.5rem;}
+
+.text-center{text-align:center;}
+
+.text-sm{font-size:.875rem;line-height:1.25rem;}
+
+.font-semibold{font-weight:600;}
+
+.leading-6{line-height:1.5rem;}
+
+.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249 / var(--tw-text-opacity));}
+
+.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity));}
+
+.hover\:text-slate-100:hover{--tw-text-opacity:1;color:rgb(241 245 249 / var(--tw-text-opacity));}
+
+@media (min-width: 1024px){
+
+.lg\:flex-row{flex-direction:row;}
+
+.lg\:flex-row-reverse{flex-direction:row-reverse;}
+
+.lg\:items-baseline{align-items:baseline;}
+
+.lg\:justify-around{justify-content:space-around;}
+
+.lg\:p-10{padding:2.5rem;}
+
+.lg\:px-0{padding-left:0;padding-right:0;}
+
+}
+
+/*! CSS Used from: https://ahrominvest.ir/page/css/index.93d10874.css */
+
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
+
+:before,:after{--tw-content:"";}
+
+h1{font-size:inherit;font-weight:inherit;}
+
+a{color:inherit;text-decoration:inherit;}
+
+h1,p{margin:0;}
+
+:disabled{cursor:default;}
+
+img{display:block;vertical-align:middle;}
+
+img{max-width:100%;height:auto;}
+
+*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
+
+/* .text-gradient{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;} */
+
+.btn{height:3.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:1rem;padding-left:2rem;padding-right:2rem;font-size:.875rem;line-height:1.25rem;font-weight:600;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.4, 0, .2, 1);}
+
+.btn:hover{cursor:pointer;}
+
+.btn:focus{outline:2px solid transparent;outline-offset:2px;}
+
+.visible{visibility:visible;}
+
+.relative{position:relative;}
+
+.z-10{z-index:10;}
+
+.mx-auto{margin-left:auto;margin-right:auto;}
+
+.mt-6{margin-top:1.5rem;}
+
+.flex{display:flex;}
+
+.hidden{display:none;}
+
+.w-full{width:100%;}
+
+.max-w-5xl{max-width:64rem;}
+
+.max-w-sm{max-width:24rem;}
+
+.max-w-2xl{max-width:42rem;}
+
+.flex-col{flex-direction:column;}
+
+.items-center{align-items:center;}
+
+.justify-center{justify-content:center;}
+
+.gap-3{gap:.75rem;}
+
+.border-2{border-width:2px;}
+
+.border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184 / var(--tw-border-opacity));}
+
+.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));}
+
+.p-6{padding:1.5rem;}
+
+.py-20{padding-top:5rem;padding-bottom:5rem;}
+
+.pt-28{padding-top:7rem;}
+
+.pr-2{padding-right:.5rem;}
+
+.text-center{text-align:center;}
+
+.text-lg{font-size:1.125rem;line-height:1.75rem;}
+
+.text-2xl{font-size:1.5rem;line-height:2rem;}
+
+.font-bold{font-weight:700;}
+
+.tracking-tight{letter-spacing:-.025em;}
+
+.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity));}
+
+.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity));}
+
+.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}
+
+.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59 / var(--tw-text-opacity));}
+
+.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}
+
+.hover\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184 / var(--tw-bg-opacity));}
+
+.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}
+
+.hover\:opacity-90:hover{opacity:.9;}
+
+@media (min-width: 640px){
+
+.sm\:w-auto{width:auto;}
+
+.sm\:w-1\/2{width:50%;}
+
+.sm\:flex-row{flex-direction:row;}
+
+.sm\:justify-start{justify-content:flex-start;}
+
+.sm\:p-6{padding:1.5rem;}
+
+.sm\:py-24{padding-top:6rem;padding-bottom:6rem;}
+
+.sm\:pt-40{padding-top:10rem;}
+
+.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
+
+}
+
+@media (min-width: 1024px){
+
+.lg\:mx-0{margin-left:0;margin-right:0;}
+
+.lg\:block{display:block;}
+
+.lg\:w-auto{width:auto;}
+
+.lg\:max-w-lg{max-width:32rem;}
+
+.lg\:flex-row{flex-direction:row;}
+
+.lg\:justify-between{justify-content:space-between;}
+
+.lg\:py-32{padding-top:8rem;padding-bottom:8rem;}
+
+.lg\:text-right{text-align:right;}
+
+.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
+
+}
+
+/*! CSS Used from: https://ahrominvest.ir/build/assets/app-c7c495d7.css */
+
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
+
+:before,:after{--tw-content:"";}
+
+h1{font-size:inherit;font-weight:inherit;}
+
+a{color:inherit;text-decoration:inherit;}
+
+h1,p{margin:0;}
+
+:disabled{cursor:default;}
+
+img{display:block;vertical-align:middle;}
+
+img{max-width:100%;height:auto;}
+
+*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
+
+.visible{visibility:visible;}
+
+.relative{position:relative;}
+
+.z-10{z-index:10;}
+
+.mx-auto{margin-left:auto;margin-right:auto;}
+
+.mt-6{margin-top:1.5rem;}
+
+.flex{display:flex;}
+
+.hidden{display:none;}
+
+.w-full{width:100%;}
+
+.max-w-2xl{max-width:42rem;}
+
+.max-w-5xl{max-width:64rem;}
+
+.max-w-sm{max-width:24rem;}
+
+.flex-col{flex-direction:column;}
+
+.items-center{align-items:center;}
+
+.justify-center{justify-content:center;}
+
+.gap-3{gap:.75rem;}
+
+.border-2{border-width:2px;}
+
+.border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184 / var(--tw-border-opacity));}
+
+.bg-ahrom{--tw-bg-opacity:1;background-color:rgb(8 70 66 / var(--tw-bg-opacity));}
+
+.bg-header{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity));}
+
+.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));}
+
+.p-6{padding:1.5rem;}
+
+.py-20{padding-top:5rem;padding-bottom:5rem;}
+
+.pr-2{padding-right:.5rem;}
+
+.pt-28{padding-top:7rem;}
+
+.text-center{text-align:center;}
+
+.text-2xl{font-size:1.5rem;line-height:2rem;}
+
+.text-lg{font-size:1.125rem;line-height:1.75rem;}
+
+.font-bold{font-weight:700;}
+
+.tracking-tight{letter-spacing:-.025em;}
+
+.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity));}
+
+.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59 / var(--tw-text-opacity));}
+
+.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity));}
+
+.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}
+
+.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);}
+
+.hover\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184 / var(--tw-bg-opacity));}
+
+.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}
+
+.hover\:opacity-90:hover{opacity:.9;}
+
+@media (min-width: 640px){
+
+.sm\:w-1\/2{width:50%;}
+
+.sm\:w-auto{width:auto;}
+
+.sm\:flex-row{flex-direction:row;}
+
+.sm\:justify-start{justify-content:flex-start;}
+
+.sm\:p-6{padding:1.5rem;}
+
+.sm\:py-24{padding-top:6rem;padding-bottom:6rem;}
+

resources/css/swiper-bundle.css

@@ -0,0 +1,735 @@
+/**
+ * Swiper 11.2.1
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2025 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: January 10, 2025
+ */
+
+/* FONT_START */
+@font-face {
+  font-family: 'swiper-icons';
+  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
+  font-weight: 400;
+  font-style: normal;
+}
+/* FONT_END */
+:root {
+  --swiper-theme-color: #007aff;
+  /*
+  --swiper-preloader-color: var(--swiper-theme-color);
+  --swiper-wrapper-transition-timing-function: initial;
+  */
+}
+:host {
+  position: relative;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1;
+}
+.swiper {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+  display: block;
+}
+.swiper-vertical > .swiper-wrapper {
+  flex-direction: column;
+}
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
+  box-sizing: content-box;
+}
+.swiper-android .swiper-slide,
+.swiper-ios .swiper-slide,
+.swiper-wrapper {
+  transform: translate3d(0px, 0, 0);
+}
+.swiper-horizontal {
+  touch-action: pan-y;
+}
+.swiper-vertical {
+  touch-action: pan-x;
+}
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+  display: block;
+}
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+/* Auto Height */
+.swiper-autoheight,
+.swiper-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+.swiper-backface-hidden .swiper-slide {
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+/* 3D Effects */
+.swiper-3d.swiper-css-mode .swiper-wrapper {
+  perspective: 1200px;
+}
+.swiper-3d .swiper-wrapper {
+  transform-style: preserve-3d;
+}
+.swiper-3d {
+  perspective: 1200px;
+}
+.swiper-3d .swiper-slide,
+.swiper-3d .swiper-cube-shadow {
+  transform-style: preserve-3d;
+}
+/* CSS Mode */
+.swiper-css-mode > .swiper-wrapper {
+  overflow: auto;
+  scrollbar-width: none;
+  /* For Firefox */
+  -ms-overflow-style: none;
+  /* For Internet Explorer and Edge */
+}
+.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.swiper-css-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: start start;
+}
+.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
+  scroll-snap-type: x mandatory;
+}
+.swiper-css-mode.swiper-vertical > .swiper-wrapper {
+  scroll-snap-type: y mandatory;
+}
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
+  scroll-snap-type: none;
+}
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: none;
+}
+.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
+  content: '';
+  flex-shrink: 0;
+  order: 9999;
+}
+.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
+  scroll-snap-align: center center;
+  scroll-snap-stop: always;
+}
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+  margin-inline-start: var(--swiper-centered-offset-before);
+}
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+  height: 100%;
+  min-height: 1px;
+  width: var(--swiper-centered-offset-after);
+}
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+  margin-block-start: var(--swiper-centered-offset-before);
+}
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+  width: 100%;
+  min-width: 1px;
+  height: var(--swiper-centered-offset-after);
+}
+/* Slide styles start */
+/* 3D Shadows */
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  transform-origin: 50%;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-radius: 50%;
+  border-top-color: transparent;
+}
+.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
+.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
+  animation: swiper-preloader-spin 1s infinite linear;
+}
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+@keyframes swiper-preloader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/* Slide styles end */
+.swiper-virtual .swiper-slide {
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+}
+.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
+  height: 1px;
+  width: var(--swiper-virtual-size);
+}
+.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
+  width: 1px;
+  height: var(--swiper-virtual-size);
+}
+:root {
+  --swiper-navigation-size: 44px;
+  /*
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 10px;
+  --swiper-navigation-color: var(--swiper-theme-color);
+  */
+}
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: var(--swiper-navigation-top-offset, 50%);
+  width: calc(var(--swiper-navigation-size) / 44 * 27);
+  height: var(--swiper-navigation-size);
+  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
+  z-index: 10;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+}
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev.swiper-button-hidden,
+.swiper-button-next.swiper-button-hidden {
+  opacity: 0;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-navigation-disabled .swiper-button-prev,
+.swiper-navigation-disabled .swiper-button-next {
+  display: none !important;
+}
+.swiper-button-prev svg,
+.swiper-button-next svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: center;
+}
+.swiper-rtl .swiper-button-prev svg,
+.swiper-rtl .swiper-button-next svg {
+  transform: rotate(180deg);
+}
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+  left: var(--swiper-navigation-sides-offset, 10px);
+  right: auto;
+}
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: var(--swiper-navigation-sides-offset, 10px);
+  left: auto;
+}
+.swiper-button-lock {
+  display: none;
+}
+/* Navigation font start */
+.swiper-button-prev:after,
+.swiper-button-next:after {
+  font-family: swiper-icons;
+  font-size: var(--swiper-navigation-size);
+  text-transform: none !important;
+  letter-spacing: 0;
+  font-variant: initial;
+  line-height: 1;
+}
+.swiper-button-prev:after,
+.swiper-rtl .swiper-button-next:after {
+  content: 'prev';
+}
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: var(--swiper-navigation-sides-offset, 10px);
+  left: auto;
+}
+.swiper-button-next:after,
+.swiper-rtl .swiper-button-prev:after {
+  content: 'next';
+}
+/* Navigation font end */
+:root {
+  /*
+  --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-left: auto;
+  --swiper-pagination-right: 8px;
+  --swiper-pagination-bottom: 8px;
+  --swiper-pagination-top: auto;
+  --swiper-pagination-fraction-color: inherit;
+  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
+  --swiper-pagination-progressbar-size: 4px;
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-border-radius: 50%;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
+  */
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+.swiper-pagination-disabled > .swiper-pagination,
+.swiper-pagination.swiper-pagination-disabled {
+  display: none !important;
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal {
+  bottom: var(--swiper-pagination-bottom, 8px);
+  top: var(--swiper-pagination-top, auto);
+  left: 0;
+  width: 100%;
+}
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transform: scale(0.33);
+  position: relative;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  transform: scale(0.33);
+}
+.swiper-pagination-bullet {
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
+  display: inline-block;
+  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+          appearance: none;
+}
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-bullet:only-child {
+  display: none !important;
+}
+.swiper-pagination-bullet-active {
+  opacity: var(--swiper-pagination-bullet-opacity, 1);
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+.swiper-vertical > .swiper-pagination-bullets,
+.swiper-pagination-vertical.swiper-pagination-bullets {
+  right: var(--swiper-pagination-right, 8px);
+  left: var(--swiper-pagination-left, auto);
+  top: 50%;
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
+  display: block;
+}
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  transition: 200ms transform,
+        200ms top;
+}
+.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
+}
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform,
+        200ms left;
+}
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: 200ms transform,
+    200ms right;
+}
+/* Fraction */
+.swiper-pagination-fraction {
+  color: var(--swiper-pagination-fraction-color, inherit);
+}
+/* Progress */
+.swiper-pagination-progressbar {
+  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
+  position: absolute;
+}
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(0);
+  transform-origin: left top;
+}
+.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  transform-origin: right top;
+}
+.swiper-horizontal > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-horizontal,
+.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: var(--swiper-pagination-progressbar-size, 4px);
+  left: 0;
+  top: 0;
+}
+.swiper-vertical > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-vertical,
+.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
+  width: var(--swiper-pagination-progressbar-size, 4px);
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-pagination-lock {
+  display: none;
+}
+:root {
+  /*
+  --swiper-scrollbar-border-radius: 10px;
+  --swiper-scrollbar-top: auto;
+  --swiper-scrollbar-bottom: 4px;
+  --swiper-scrollbar-left: auto;
+  --swiper-scrollbar-right: 4px;
+  --swiper-scrollbar-sides-offset: 1%;
+  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
+  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
+  --swiper-scrollbar-size: 4px;
+  */
+}
+.swiper-scrollbar {
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  position: relative;
+  touch-action: none;
+  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
+}
+.swiper-scrollbar-disabled > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-disabled {
+  display: none !important;
+}
+.swiper-horizontal > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-horizontal {
+  position: absolute;
+  left: var(--swiper-scrollbar-sides-offset, 1%);
+  bottom: var(--swiper-scrollbar-bottom, 4px);
+  top: var(--swiper-scrollbar-top, auto);
+  z-index: 50;
+  height: var(--swiper-scrollbar-size, 4px);
+  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+}
+.swiper-vertical > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-vertical {
+  position: absolute;
+  left: var(--swiper-scrollbar-left, auto);
+  right: var(--swiper-scrollbar-right, 4px);
+  top: var(--swiper-scrollbar-sides-offset, 1%);
+  z-index: 50;
+  width: var(--swiper-scrollbar-size, 4px);
+  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+}
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+.swiper-scrollbar-lock {
+  display: none;
+}
+/* Zoom container styles start */
+.swiper-zoom-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+/* Zoom container styles end */
+.swiper-slide-zoomed {
+  cursor: move;
+  touch-action: none;
+}
+/* a11y */
+.swiper .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+.swiper-free-mode > .swiper-wrapper {
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+.swiper-grid > .swiper-wrapper {
+  flex-wrap: wrap;
+}
+.swiper-grid-column > .swiper-wrapper {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.swiper-fade.swiper-free-mode .swiper-slide {
+  transition-timing-function: ease-out;
+}
+.swiper-fade .swiper-slide {
+  pointer-events: none;
+  transition-property: opacity;
+}
+.swiper-fade .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-fade .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-fade .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper.swiper-cube {
+  overflow: visible;
+}
+.swiper-cube .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+  visibility: hidden;
+  transform-origin: 0 0;
+  width: 100%;
+  height: 100%;
+}
+.swiper-cube .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-cube.swiper-rtl .swiper-slide {
+  transform-origin: 100% 0;
+}
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-next,
+.swiper-cube .swiper-slide-prev {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  z-index: 0;
+}
+.swiper-cube .swiper-cube-shadow:before {
+  content: '';
+  background: #000;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  filter: blur(50px);
+}
+.swiper-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+/* Cube slide shadows start */
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+/* Cube slide shadows end */
+.swiper.swiper-flip {
+  overflow: visible;
+}
+.swiper-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 1;
+}
+.swiper-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-flip .swiper-slide-active,
+.swiper-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+/* Flip slide shadows start */
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+/* Flip slide shadows end */
+.swiper-creative .swiper-slide {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  overflow: hidden;
+  transition-property: transform, opacity, height;
+}
+.swiper.swiper-cards {
+  overflow: visible;
+}
+.swiper-cards .swiper-slide {
+  transform-origin: center bottom;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  overflow: hidden;
+}

resources/js/app.js

@@ -0,0 +1,5 @@
+import './bootstrap';
+import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
+window.Alpine = Alpine ;
+Livewire.start();
+

resources/js/bootstrap.js

@@ -0,0 +1,4 @@
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/views/components/grid/bigscroller.blade.php

@@ -0,0 +1,235 @@
+@props(['blogs','scroll'=>true])
+
+
+@if($scroll)
+
+<div class="h-full">
+
+    <div wire:ignore dir="ltr" x-data="slider3" class=" group swiper-container h-full">
+        <div class="swiper swiper3 h-full">
+            <!-- Wrapper -->
+            <div class="swiper-wrapper h-full">
+                <!-- Slides -->
+
+                @foreach($blogs as $blog)
+
+                <div class="swiper-slide w-1/4 h-full ">
+
+                    <div style="transition: transform 0.5s ease-in-out;" class="flex gap-10     overflow-x-auto h-full">
+
+                        <div class="h-full w-full rounded-xl" style="background-image: url('{{asset('images/'.$blog->image)}}');background-size:     cover;
+                             background-repeat:   no-repeat;
+                             background-position: center center; ">
+
+                            <div class="w-full h-full rounded-xl flex "
+                                style="background-image: linear-gradient(180deg, transparent, black);">
+
+                                <div dir="rtl" class="h-full w-full flex flex-col gap-3 p-7  justify-between ">
+
+                                    <div>
+                                        <div style="background: {{$blog->category->color}}"
+                                            class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-xs items-center">
+                                            <svg height="12" width="10" xmlns="http://www.w3.org/2000/svg">
+                                                <circle r="4" cx="5" cy="5.5" fill="black" />
+                                            </svg>
+                                            {{$blog->category->title}}
+                                        </div>
+                                    </div>
+
+                                    <div class="flex flex-col gap-3">
+
+
+                                        <div class="text-white">
+                                            {!! $blog->subject!!}
+                                            {{-- {!! $blog->subject !!}--}}
+                                        </div>
+                                        <div>
+                                            {{-- توضیحات--}}
+                                            {{-- {!! $blog->preview !!}--}}
+                                        </div>
+                                        <div class="flex gap-5 text-white">
+
+                                            <div class="text-xs">
+                                                {{-- تاریخ--}}
+                                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
+                                            </div>
+
+                                            <div class="text-xs">
+                                                {{-- زمان مطالعه--}}
+                                                {!! $blog->reed_time !!} دقیقه زمان مطالعه
+                                            </div>
+
+                                            {{-- <div>--}}
+                                            {{-- {!! $blog->likes ??0 !!}--}}
+                                            {{-- </div>--}}
+
+                                        </div>
+                                    </div>
+
+                                </div>
+
+
+                            </div>
+
+                        </div>
+
+
+                    </div>
+
+
+
+                </div>
+
+                @endforeach
+
+            </div>
+
+            {{-- <!-- Pagination -->--}}
+            {{-- <div class="swiper-pagination"></div>--}}
+
+            <!-- Navigation Buttons -->
+            <div class="swiper-button-prev ">
+
+                {{-- hover:bg-[#000000b3]    bg-[#00000080]        --}}
+                <button
+                    class="prev absolute hover:backdrop-blur-sm w-12 h-12 items-center content-center rounded-full  backdrop-blur-md text-white transform duration-500 group-hover:left-5 -left-52 opacity-0 group-hover:opacity-100 ">&#10094;
+                </button>
+
+            </div>
+            <div class="swiper-button-next">
+
+                {{-- hover:bg-[#000000b3]    bg-[#00000080]        --}}
+                <button
+                    class="next absolute  w-12 h-12 items-center content-center rounded-full hover:backdrop-blur-sm backdrop-blur-md  text-white transform duration-500 group-hover:right-5 -right-52 opacity-0 group-hover:opacity-100 ">&#10095;
+                </button>
+
+            </div>
+        </div>
+    </div>
+
+
+    @script
+
+    <script>
+        Alpine.data('slider3', () => ({
+            swiper: null,
+            init() {
+                this.swiper = new Swiper('.swiper3', {
+                    loop: true, // فعال‌سازی حالت لوپ
+                    slidesPerView: 4, // تعداد اسلایدهای قابل نمایش در هر صفحه
+                    spaceBetween: 30, // فاصله بین اسلایدها
+                    navigation: {
+                        nextEl: '.swiper-button-next',
+                        prevEl: '.swiper-button-prev',
+                    },
+                    autoplay: {
+                        delay: 5000,
+                        disableOnInteraction: false,
+                    },
+                    speed: 400,
+                    // pagination: {
+                    //     el: '.swiper-pagination',
+                    //     clickable: true,
+                    // },
+                });
+
+
+
+            },
+
+
+        }))
+    </script>
+
+    @endscript
+
+
+</div>
+
+@else
+
+
+<div class="w-full grid grid-cols-4 gap-5">
+    @foreach($blogs as $blog)
+
+    <div class="flex gap-10  my-8 overflow-x-auto h-[45vh]">
+
+        <div class="h-full w-80 rounded-xl" style="background-image: url('{{asset('images/'.$blog->image)}}');background-size:     cover;
+                     background-repeat:   no-repeat;
+                     background-position: center center; ">
+
+            <div class="w-full h-full rounded-xl flex "
+                style="background-image: linear-gradient(180deg, transparent, black);">
+
+                <div dir="rtl" class="h-full w-full flex flex-col gap-3 p-7 justify-between ">
+
+                    <div>
+                        <div style="background: {{$blog->category->color}}"
+                            class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-xs items-center">
+                            <svg height="12" width="10" xmlns="http://www.w3.org/2000/svg">
+                                <circle r="4" cx="5" cy="5.5" fill="black" />
+                            </svg>
+                            {{$blog->category->title}}
+                        </div>
+                    </div>
+
+                    <div class="flex flex-col gap-1">
+
+
+                        <div class="text-white">
+                            {!! $blog->subject!!}
+                            {{-- {!! $blog->subject !!}--}}
+                        </div>
+                        <div>
+                            {{-- توضیحات--}}
+                            {{-- {!! $blog->preview !!}--}}
+                        </div>
+                        <div class="flex gap-3 text-white">
+
+                            <div class="text-xs flex flex-col justify-center">
+
+                                با میلاد بابایی
+                                {{-- تاریخ--}}
+                                {{-- {{jalaliDate($blog->updated_at,'%d %B، %Y')}}--}}
+                            </div>
+
+                            <span>.</span>
+
+                            <div class="text-xs flex flex-col justify-center">
+                                {{-- زمان مطالعه--}}
+                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
+
+                                {{-- {!! $blog->reed_time !!} دقیقه زمان مطالعه--}}
+                            </div>
+
+                            {{-- <div>--}}
+                            {{-- {!! $blog->likes ??0 !!}--}}
+                            {{-- </div>--}}
+
+                        </div>
+                    </div>
+
+                </div>
+
+
+            </div>
+
+        </div>
+
+
+    </div>
+
+
+
+
+    @endforeach
+</div>
+
+
+
+
+
+
+
+
+@endif

resources/views/components/grid/fourcol.blade.php

@@ -0,0 +1,80 @@
+@props(['blogs'])
+
+<div>
+
+    <div class="grid grid-cols-4 justify-between gap-5  my-8  ">
+
+        @foreach($blogs as $blog)
+
+        <div class="h-full">
+
+            <div class="h-2/3">
+                <div class="relative h-full">
+                    <img class="w-full h-full rounded-xl" src="{{asset('images/'.$blog->image)}}" alt="">
+                    <div class="absolute p-3 py-5 bottom-0">
+                        <div>
+                            <div style="background: {{$blog->category->color}}"
+                                class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-2 w-max text-xs items-center">
+                                <svg height="12" width="10"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <circle r="4" cx="5" cy="5.5" fill="black" />
+                                </svg>
+                                {{$blog->category->title}}
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col gap-1 mt-3">
+
+
+
+
+                <div class="text-white">
+                    {!! $blog->subject!!}
+                    {{-- {!! $blog->subject !!}--}}
+                </div>
+                <div>
+                    {{-- توضیحات--}}
+                    {{-- {!! $blog->preview !!}--}}
+                </div>
+                <div class="flex gap-3 text-white">
+
+                    <div class="flex flex-col justify-center">
+                        <img class="rounded-full size-8" src="http://127.0.0.1:8000/images/17365895806dl75b4493S48w80sD0323r31KB6V48E_.jpg" alt="">
+                    </div>
+
+                    <div class="text-xs text-gray-400 flex flex-col justify-center">
+                        {{-- تاریخ--}}
+                        با المیرا کرمی
+                        {{-- {{jalaliDate($blog->updated_at,'%d %B، %Y')}}--}}
+                    </div>
+
+                    <span class="text-gray-400">.</span>
+
+                    <div class="text-xs text-gray-400 flex flex-col justify-center">
+                        {{-- زمان مطالعه--}}
+                        {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
+
+                        {{-- {!! $blog->reed_time !!} دقیقه زمان مطالعه--}}
+                    </div>
+
+                    {{-- <div>--}}
+                    {{-- {!! $blog->likes ??0 !!}--}}
+                    {{-- </div>--}}
+
+                </div>
+            </div>
+
+        </div>
+        @endforeach
+
+
+
+
+
+    </div>
+
+</div>

resources/views/components/grid/littlescroller.blade.php

@@ -0,0 +1,145 @@
+@props(['blogs','scroll'=>true])
+
+
+@if($scroll)
+
+<div>
+
+
+    <div wire:ignore dir="ltr" x-data="slider4" class="relative group swiper-container h-full">
+        <div class="swiper swiper4 h-full">
+            <!-- Wrapper -->
+            <div class="swiper-wrapper  h-full">
+                <!-- Slides -->
+
+                @foreach($blogs as $blog)
+
+                <div class="swiper-slide flex justify-center h-max">
+
+                    <div class=" flex flex-col gap-3 h-max w-full ">
+
+                        <div dir="rtl" class="w-full">
+                            {{-- :style="`height: ${width}px`"       --}}
+                            <img :style="`height: ${width}px`" @if($loop->first) id="imagee" @endif class="w-full rounded-xl"
+                            src="{{asset('images/'.$blog->image)}}"
+                            alt="">
+                        </div>
+
+                        <div dir="rtl" class="flex flex-col ">
+                            <div class="text-white">
+                                رضا کریمی
+                            </div>
+
+                            <div class="text-gray-400 text-xs">
+                                مدیر فروش
+                            </div>
+                        </div>
+
+                    </div>
+
+
+                </div>
+                @endforeach
+
+            </div>
+
+            {{-- <!-- Pagination -->--}}
+            {{-- <div class="swiper-pagination"></div>--}}
+
+            <!-- Navigation Buttons -->
+            <div class="swiper-button-prev ">
+
+                {{-- hover:bg-[#000000b3]    bg-[#00000080]        --}}
+                <button
+                    class="prev absolute  w-12 h-12 items-center content-center rounded-full  hover:backdrop-blur-sm backdrop-blur-md text-white transform duration-500 group-hover:left-5 -left-52 opacity-0 group-hover:opacity-100 ">&#10094;
+                </button>
+
+            </div>
+            <div class="swiper-button-next">
+
+                {{-- hover:bg-[#000000b3]    bg-[#00000080]        --}}
+                <button
+                    class="next absolute  w-12 h-12 items-center content-center rounded-full  hover:backdrop-blur-sm backdrop-blur-md text-white transform duration-500 group-hover:right-5 -right-52 opacity-0 group-hover:opacity-100">&#10095;
+                </button>
+
+            </div>
+        </div>
+    </div>
+
+
+
+
+
+    @script
+
+    <script>
+        Alpine.data('slider4', () => ({
+            swiper4: null,
+            width: ((document.getElementById('imagee').clientWidth) - 120) / 6,
+            init() {
+                this.swiper4 = new Swiper('.swiper4', {
+                    loop: true, // فعال‌سازی حالت لوپ
+                    slidesPerView: 6, // تعداد اسلایدهای قابل نمایش در هر صفحه
+                    spaceBetween: 20, // فاصله بین اسلایدها
+                    navigation: {
+                        nextEl: '.swiper-button-next',
+                        prevEl: '.swiper-button-prev',
+                    },
+                    // pagination: {
+                    //     el: '.swiper-pagination',
+                    //     clickable: true,
+                    // },
+
+                    autoplay: {
+                        delay: 5000,
+                        disableOnInteraction: false,
+                    },
+
+                });
+
+
+            },
+
+
+        }))
+    </script>
+
+    @endscript
+
+
+</div>
+
+@else
+
+<div class="grid grid-cols-6 items-center content-center">
+
+    @foreach($blogs as $blog)
+    <div class=" ">
+
+        <div dir="rtl">
+            <img class="size-44 rounded-xl"
+                src="{{asset('images/'.$blog->image)}}"
+                alt="">
+        </div>
+
+        <div dir="rtl" class="flex flex-col mt-2 ">
+            <div class="text-white">
+                رضا کریمی
+            </div>
+
+            <div class="text-gray-400 text-xs">
+                مدیر فروش
+            </div>
+        </div>
+
+    </div>
+
+    @endforeach
+
+
+
+
+</div>
+
+
+@endif

resources/views/components/grid/puzzle.blade.php

@@ -0,0 +1,287 @@
+@props(['blogs'])
+
+<div>
+
+    @php
+    $count=0;
+    $num=0;
+    @endphp
+
+    @foreach($blogs->chunk(4) as $key => $chunk)
+
+    <div class="grid my-5 grid-cols-2 gap-10 h-[66vh] ">
+
+
+        {{-- @dd($blogs->chunk(4))--}}
+        @if($count%4==0 && $chunk->has($count))
+        @php
+
+        $blog=$chunk->all()[$count];
+
+        $num=0;
+
+        @endphp
+        <div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size:     cover;
+                                                background-repeat:   no-repeat;
+                                                background-position: center center;
+                                                "
+            class="   rounded-xl">
+
+            <a href="{{route('detail',['id'=>$blog->id])}}" wire:navigate>
+
+                <div class="p-5 h-full  rounded-xl"
+                    style="background-image: linear-gradient(180deg, transparent, black);">
+
+                    <div class="h-full flex flex-col gap-1 justify-end">
+
+                        <div>
+                            <div style="background: {{$blog->category->color}}"
+                                class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
+                                <svg height="12" width="12" xmlns="http://www.w3.org/2000/svg">
+                                    <circle r="5" cx="5" cy="6.5" fill="black" />
+                                </svg>
+                                {{$blog->category->title}}
+                            </div>
+                        </div>
+
+                        <div>
+                            {!! $blog->subject !!}
+                        </div>
+                        <div>
+                            {!! $blog->preview !!}
+                        </div>
+                        <div class="flex gap-5 text-white">
+
+                            <div>
+                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
+                            </div>
+
+                            <div>
+                                {!! $blog->reed_time !!} دقیقه زمان مطالعه
+                            </div>
+
+                            <div>
+                                {!! $blog->likes ??0 !!}
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+            </a>
+
+        </div>
+
+        @php $count=$count+1; @endphp
+
+        @endif
+
+
+        <div class="">
+            <div class="grid gap-10 h-full">
+
+                @if($count%4==1 && $chunk->has($count))
+                @php
+
+                $blog=$chunk->all()[$count];
+
+                @endphp
+                <div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size:     cover;
+                                                background-repeat:   no-repeat;
+                                                background-position: center center;"
+                    class=" rounded-xl ">
+
+                    <a href="{{route('detail',['id'=>$blog->id])}}" wire:navigate>
+
+                        <div class="p-5 h-full rounded-xl"
+                            style="background-image: linear-gradient(180deg, transparent, black);">
+
+                            <div class="h-full flex flex-col gap-1 justify-end">
+
+                                <div>
+                                    <div style="background: {{$blog->category->color}}"
+                                        class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
+                                        <svg height="12" width="12" xmlns="http://www.w3.org/2000/svg">
+                                            <circle r="5" cx="5" cy="6.5" fill="black" />
+                                        </svg>
+                                        {{$blog->category->title}}
+                                    </div>
+                                </div>
+
+                                <div>
+                                    {!! $blog->subject !!}
+                                </div>
+                                <div>
+                                    {!! $blog->preview !!}
+                                </div>
+                                <div class="flex gap-5 text-white">
+
+                                    <div>
+                                        {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
+                                    </div>
+
+                                    <div>
+                                        {!! $blog->reed_time !!} دقیقه زمان مطالعه
+                                    </div>
+
+                                    <div>
+                                        {!! $blog->likes ??0 !!}
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </div>
+                    </a>
+
+                </div>
+
+                @php $count=$count+1; @endphp
+
+                @endif
+
+
+                <div>
+
+                    <div class="grid grid grid-cols-2 gap-10 h-full">
+
+                        @if($count%4==2 && $chunk->has($count))
+                        @php
+
+                        $blog=$chunk->all()[$count]
+
+                        @endphp
+                        <div style="background-image: url('{{asset('images/'.$blog->image)}}');background-size:     cover;
+                                                background-repeat:   no-repeat;
+                                                background-position: center center;"
+                            class=" rounded-xl ">
+
+                            <a {{route('detail',['id'=>$blog->id])}} wire:navigate>
+
+                                <div class="p-5 h-full rounded-xl "
+                                    style="background-image: linear-gradient(180deg, transparent, black);">
+
+                                    <div class="h-full flex flex-col gap-1 justify-end">
+
+                                        <div>
+                                            <div style="background: {{$blog->category->color}}"
+                                                class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
+                                                <svg height="12" width="12"
+                                                    xmlns="http://www.w3.org/2000/svg">
+                                                    <circle r="5" cx="5" cy="6.5" fill="black" />
+                                                </svg>
+                                                {{$blog->category->title}}
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            {!! $blog->subject !!}
+                                        </div>
+                                        <div>
+                                            {!! $blog->preview !!}
+                                        </div>
+                                        <div class="flex gap-5 text-white">
+
+                                            <div class="text-xs">
+                                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
+                                            </div>
+
+                                            <div class="text-xs">
+                                                {!! $blog->reed_time !!} دقیقه زمان مطالعه
+                                            </div>
+
+                                            {{-- <div class="text-xs">--}}
+                                            {{-- {!! $blog->likes ??0 !!}--}}
+                                            {{-- </div>--}}
+
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </a>
+
+                        </div>
+                        @php $count=$count+1; @endphp
+
+                        @endif
+
+
+                        @if($count%4==3 && $chunk->has($count))
+                        @php
+
+                        $blog=$chunk->all()[$count]
+
+                        @endphp
+                        <div style="background-image: url('{{asset('images/'.$blog->image)}}');
+                                                background-size:     cover;
+                                                background-repeat:   no-repeat;
+                                                background-position: center center;" class=" rounded-xl">
+
+                            <a {{route('detail',['id'=>$blog->id])}} wire:navigate>
+
+                                <div class="p-5 h-full rounded-xl"
+                                    style="background-image: linear-gradient(180deg, transparent, black);">
+
+                                    <div class="h-full flex flex-col gap-1 justify-end">
+
+                                        <div>
+                                            <div style="background: {{$blog->category->color}}"
+                                                class="flex px-1.5 py-0.5 rounded bg-[{{$blog->category->color}}] gap-1 w-max text-sm items-center">
+                                                <svg height="12" width="12"
+                                                    xmlns="http://www.w3.org/2000/svg">
+                                                    <circle r="5" cx="5" cy="6.5" fill="black" />
+                                                </svg>
+                                                {{$blog->category->title}}
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            {!! $blog->subject !!}
+                                        </div>
+                                        <div>
+                                            {!! $blog->preview !!}
+                                        </div>
+                                        <div class="flex gap-5 text-white">
+
+                                            <div class="text-xs">
+                                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
+                                            </div>
+
+                                            <div class="text-xs">
+                                                {!! $blog->reed_time !!} دقیقه زمان مطالعه
+                                            </div>
+
+                                            {{-- <div class="text-xs">--}}
+                                            {{-- {!! $blog->likes ??0 !!}--}}
+                                            {{-- </div>--}}
+
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </a>
+
+                        </div>
+
+                        @php $count=$count+1; @endphp
+
+
+                        @endif
+
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+
+    </div>
+
+    @endforeach
+
+
+</div>

resources/views/components/grid/threecol.blade.php

@@ -0,0 +1,105 @@
+@props(['blogs', 'title', 'slug' , 'parent'])
+<div class="  lg:border-0 w-full ">
+    @if (request()->is('CategoryBlog/*'))
+    <div href="#" class="  text-[#16205b] my-3 flex font-bold  lg:my-8 text-[16px] lg:text-[20px] text-start items-center   gap-2">
+        <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div> <span class="text-[#16205b]"> مطالب {{$title}}</span>
+    </div>
+    @else
+    <div class="text-black my-3 lg:my-8  flex  text-[16px] lg:text-[20px] text-start justify-between items-center   gap-2">
+        @if (!is_null($parent))
+        @php
+        $parent_nameFa = App\Models\Category::where('slug' , $parent)->where('parent' , 1)->first()->title;
+        @endphp
+        <span class="font-bold flex items-center gap-2 text-[#16205b] ">
+            <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div>
+            {{$parent_nameFa}} {{$title}}
+        </span>
+        @else
+        <span class="font-bold flex items-center gap-2 text-[#16205b] ">
+            <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div>
+            مطالب {{$title}}
+        </span>
+        @endif
+        @if (!is_null($parent))
+        <a class="  text-[#16205b] md:flex hidden  rounded-xl px-2  text-[16px]  " href="{{route('CategoryBlog.index' , ['categoryunderparentslug' => $parent ,  'slug' => $slug]).'/'}}" wire:navigate>مشاهده همه</a>
+
+        @else
+        <a class="  text-[#16205b] md:flex hidden  rounded-xl px-2  text-[16px]  " href="{{route('CategoryBlog.index' , ['categoryunderparentslug' => $slug]).'/'}}" wire:navigate>مشاهده همه</a>
+
+        @endif
+    </div>
+    @endif
+    <div x-data="blogList" x-intersect="shown = true">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8" x-show="shown" x-transition>
+            @foreach ($blogs as $index => $blog)
+            <div x-show="{{$index }} < limit" class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
+                <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
+                    <img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none" src="{{ asset('images/' . $blog->image) }}" alt="">
+                </a>
+                <div class="flex  md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
+                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                        {!! $blog->subject !!}
+                    </a>
+                    <div class="md:block hidden text-[#16205b]">
+                        @php
+                        $preview = Str::limit($blog->preview, 80, '...');
+                        @endphp
+                        {!! $preview !!}
+                    </div>
+                    <div class="flex gap-1 text-white md:mt-auto">
+                        <div class="hidden md:flex flex-col justify-center">
+                            <img class="bg-cover bg-center rounded-full size-8" src="{{ asset('image/'.$blog->user->picture) }}" alt="">
+                        </div>
+                        <div class="text-xs text-gray-600 flex flex-col justify-center">
+                            {{ $blog->user->full_name }}
+                        </div>
+                        <span style="font-variation-settings: 'wght' 500;" class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
+                        <div class="text-xs text-gray-600 flex flex-col justify-center">
+                            {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            @endforeach
+        </div>
+    </div>
+    @if (request()->is('CategoryBlog/*'))
+    <button class="w-full p-3 mb-6  md:hidden block  rounded-xl text-center border border-[#084642] text-[#084642]">
+        مشاهده مطالب بیشتر
+    </button>
+    @else
+    @if (!is_null($parent))
+    <a href=" {{cleanRouteUrl('CategoryBlog.index' , ['categoryunderparentslug' => $parent , 'slug' => $slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block   mb-6 rounded-xl  text-center  border border-[#084642] text-[#084642]">
+        مشاهده مطالب بیشتر
+    </a>
+    @else
+    <a href=" {{cleanRouteUrl('CategoryBlog.index' , ['slug' => $slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block   mb-6 rounded-xl  text-center  border border-[#084642] text-[#084642]">
+        مشاهده مطالب بیشتر
+    </a>
+    @endif
+    @endif
+</div>
+@script
+<script>
+    Alpine.data('blogList', () => ({
+        limit: 4,
+        shown: false,
+        init() {
+            this.updateLimit();
+            window.addEventListener('resize', () => this.updateLimit());
+        },
+        updateLimit() {
+            const screenWidth = window.innerWidth;
+            if (screenWidth < 768) {
+                this.limit = 5;
+            } else if (screenWidth >= 768 && screenWidth < 1024) {
+                this.limit = 2;
+            } else if (screenWidth >= 1024 && screenWidth < 1280) {
+                this.limit = 3;
+            } else {
+                this.limit = 4;
+            }
+        }
+    }));
+</script>
+@endscript

resources/views/components/grid/twocol.blade.php

@@ -0,0 +1,95 @@
+@props([
+'blogs'
+])
+
+<div>
+
+    <div class="grid grid-cols-2 gap-10 ">
+
+        @foreach($blogs as $blog)
+
+        <div class="h-[20vh] text-white">
+            <div class="flex gap-3 h-full">
+                <div class=" w-1/3 h-fill  text-white ">
+                    <img class="w-full h-full rounded-xl"
+                        src="{{asset('images/'.$blog->image)}}"
+                        alt="">
+
+                </div>
+
+                <div>
+                    <div class="h-full flex flex-col gap-2 ">
+
+                        <div>
+                            <div style="color: {{$blog->category->color}};"
+                                class="flex  relative   rounded gap-1 w-max text-xs text-black items-center">
+                                <div class="w-full h-full rounded  absolute z-0 opacity-10 " style="background: {{$blog->category->color}};">
+
+                                </div>
+                                <div class="flex gap-1 items-center px-1.5 py-0.5 rounded">
+                                    <svg height="12" width="10" xmlns="http://www.w3.org/2000/svg">
+                                        <circle r="4" cx="5" cy="5.5" fill="{{$blog->category->color}}" />
+                                    </svg>
+                                    {{$blog->category->title}}
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <div>
+                            {{-- موضوع--}}
+                            {!! $blog->subject !!}
+                        </div>
+                        {{-- <div>--}}
+                        {{-- --}}{{-- توضیحات--}}
+                        {{-- --}}{{-- {!! $blog->preview !!}--}}
+                        {{-- </div>--}}
+                        <div class="flex gap-3 text-white">
+
+                            <div class="flex flex-col justify-center">
+                                <img class="rounded-full size-8" src="http://127.0.0.1:8000/images/17365895806dl75b4493S48w80sD0323r31KB6V48E_.jpg" alt="">
+                            </div>
+
+
+                            <div class="text-xs flex flex-col justify-center text-gray-400">
+                                {{-- تاریخ--}}
+
+                                با علی علیزاده
+                                {{-- {{jalaliDate($blog->updated_at,'%d %B، %Y')}}--}}
+                            </div>
+
+                            <span class="text-gray-400">.</span>
+                            <div class="text-xs flex flex-col justify-center text-gray-400">
+                                {{-- زمان مطالعه--}}
+                                {{jalaliDate($blog->updated_at,'%d %B، %Y')}}
+                                {{-- {!! $blog->reed_time !!} دقیقه زمان مطالعه--}}
+                            </div>
+
+                            {{-- <div>--}}
+                            {{-- {!! $blog->likes ??0 !!}--}}
+                            {{-- </div>--}}
+
+                        </div>
+
+                        <div class="flex gap-3">
+
+
+
+                        </div>
+
+                    </div>
+
+
+                </div>
+
+            </div>
+        </div>
+
+        @endforeach
+
+
+
+    </div>
+
+
+</div>

resources/views/components/layouts/app.blade.php

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="{{env('APP_URL_IMAGE').'images/static/logo.png'}}">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    @section('robots')
+    <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
+    @show
+    <title>@yield('title', 'مجله خبری سرمایه گذاری اهرم')</title>
+    @yield('metaSEO')
+
+
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <script data-navigate-once src="{{asset('js/tailwind.js')}}"></script>
+    <style>
+        @font-face {
+            font-family: iransans;
+            font-style: normal;
+            font-weight: bold;
+            src: url('{{asset(' fonts/IRANSansX-Bold.woff')}}') format('woff'),
+        }
+
+        @font-face {
+            font-family: iransans;
+            font-style: normal;
+            font-weight: normal;
+            src: url('{{asset(' fonts/IRANSansXV.woff')}}') format('woff'),
+        }
+
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+
+        .bg-ahrom {
+            background-color: rgb(8, 70, 66) !important;
+        }
+
+        .bg-preveBackQuiz {
+            background-color: rgb(223, 229, 231) !important;
+        }
+
+        .position-fixed {
+            position: fixed !important;
+            top: 0 !important;
+        }
+
+        .trans_all {
+            transition: all ease .4s;
+        }
+
+        .animation-open {
+
+            transform: translateY(-32px);
+
+        }
+
+        svg {
+            pointer-events: none;
+        }
+
+        .items-center {
+            align-items: center !important;
+        }
+
+        .animation-open2 {
+
+            transform: translateY(1px);
+
+        }
+
+        #nprogress .bar,
+        .spinner {
+            z-index: 3000 !important;
+        }
+    </style>
+
+    <link href="{{asset('home/css/flowbite@2.5.2.css')}}" rel="stylesheet" />
+
+    @stack('style_css')
+
+    @livewireStyles
+</head>
+
+<body id="bodyStyle" class="min-h-screen  overflow-x-hidden bg-white leading-normal text-slate-700 antialiased">
+
+	@if(request()->ip() == '80.191.102.86' || true)
+    @livewire('partials.header')
+	@endif
+
+    <main class="   mx-auto lg:pt-24 pt-14" id="top">
+        <div wire:loading style="position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #084642;     z-index: 10000;"></div>
+        {{ $slot }}
+    </main>
+
+    @include('partials.footer')
+
+    <script data-navigate-once src="{{asset('home/js/flowbite.min.js')}}"></script>
+    <script src="{{asset('js/lottie.js')}}"></script>
+
+
+    @stack('script_js')
+    <!---start GOFTINO code--->
+    <script type="text/javascript">
+		!function(){var i="hAqxn2",a=window,d=document;function g(){var g=d.createElement("script"),s="https://www.goftino.com/widget/"+i,l=localStorage.getItem("goftino_"+i);g.async=!0,g.src=l?s+"?o="+l:s;d.getElementsByTagName("head")[0].appendChild(g);}"complete"===d.readyState?g():a.attachEvent?a.attachEvent("onload",g):a.addEventListener("load",g,!1);}();
+	</script>
+    <script>
+        var boxwidget = document.getElementById('box-widget-icon');
+        window.addEventListener('goftino_ready', function() {
+            var currentRoute = "page.credit.index";
+            if (window.innerWidth < 1024 && (currentRoute == 'page.credit.index' || currentRoute ==
+                    'page.credit.indexMobile')) {
+                Goftino.setWidget({
+                    hasIcon: false,
+                    hasSound: false,
+                });
+                var headerChatBtn = document.getElementById('header_chat_btn');
+                if (headerChatBtn) {
+                    headerChatBtn.addEventListener('click', () => {
+                        Goftino.open();
+                    })
+                }
+            }
+            var header_btn_chat2 = document.getElementById('header_btn_chat2');
+            if (header_btn_chat2) {
+                header_btn_chat2.addEventListener('click', () => {
+                    Goftino.open();
+                })
+            }
+            window.addEventListener('resize', function() {
+                currentRoute = "page.credit.index";
+                if (window.innerWidth < 1024 && (currentRoute == 'page.credit.index' || currentRoute ==
+                        'page.credit.indexMobile')) {
+                    Goftino.setWidget({
+                        hasIcon: false,
+                        hasSound: false,
+                    });
+                    if (boxwidget) {
+                        boxwidget.classList.add('hidden');
+                    }
+                    headerChatBtn = document.getElementById('header_chat_btn');
+                    if (headerChatBtn) {
+                        headerChatBtn.addEventListener('click', () => {
+                            Goftino.open();
+                        })
+                    }
+                }
+                header_btn_chat2 = document.getElementById('header_btn_chat2');
+                if (boxwidget) {
+                    boxwidget.classList.remove('hidden');
+                }
+                if (header_btn_chat2) {
+                    header_btn_chat2.addEventListener('click', () => {
+                        Goftino.open();
+                    })
+                }
+            });
+        });
+    </script>
+    <!---end GOFTINO code--->
+    @livewireScriptConfig
+</body>
+
+</html>

resources/views/components/layouts/app2.blade.php

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="{{env('APP_URL_IMAGE').'images/static/logo.png'}}">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    @section('robots')
+    <meta name='robots' content='noindex, nofollow' />
+    @show
+    <title>@yield('title', 'مجله خبری سرمایه گذاری اهرم')</title>
+    @yield('metaSEO')
+
+
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <script data-navigate-once src="{{asset('js/tailwind.js')}}"></script>
+    <style>
+        @font-face {
+            font-family: iransans;
+            font-style: normal;
+            font-weight: bold;
+            src: url('{{asset(' fonts/IRANSansX-Bold.woff')}}') format('woff'),
+        }
+
+        @font-face {
+            font-family: iransans;
+            font-style: normal;
+            font-weight: normal;
+            src: url('{{asset(' fonts/IRANSansXV.woff')}}') format('woff'),
+        }
+
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+
+        .bg-ahrom {
+            background-color: rgb(8, 70, 66) !important;
+        }
+
+        .bg-preveBackQuiz {
+            background-color: rgb(223, 229, 231) !important;
+        }
+
+        .position-fixed {
+            position: fixed !important;
+            top: 0 !important;
+        }
+
+        .trans_all {
+            transition: all ease .4s;
+        }
+
+        .animation-open {
+
+            transform: translateY(-32px);
+
+        }
+
+        svg {
+            pointer-events: none;
+        }
+
+        .items-center {
+            align-items: center !important;
+        }
+
+        .animation-open2 {
+
+            transform: translateY(1px);
+
+        }
+
+        #nprogress .bar,
+        .spinner {
+            z-index: 3000 !important;
+        }
+    </style>
+
+    <link href="{{asset('home/css/flowbite@2.5.2.css')}}" rel="stylesheet" />
+
+    @stack('style_css')
+
+    @livewireStyles
+</head>
+
+<body id="bodyStyle" class="min-h-screen  overflow-x-hidden bg-white leading-normal text-slate-700 antialiased">
+
+    // @livewire('partials.header')
+
+    <main class="   mx-auto lg:pt-24 pt-14" id="top">
+        <div wire:loading style="position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #084642;     z-index: 10000;"></div>
+        {{ $slot }}
+    </main>
+
+    @include('partials.footer')
+
+    <script data-navigate-once src="{{asset('home/js/flowbite.min.js')}}"></script>
+    // <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
+    <script src="{{asset('home/js/lottie.min.js')}}"></script>
+    @stack('script_js')
+    <!---start GOFTINO code--->
+    <script type="text/javascript">
+		!function(){var i="hAqxn2",a=window,d=document;function g(){var g=d.createElement("script"),s="https://www.goftino.com/widget/"+i,l=localStorage.getItem("goftino_"+i);g.async=!0,g.src=l?s+"?o="+l:s;d.getElementsByTagName("head")[0].appendChild(g);}"complete"===d.readyState?g():a.attachEvent?a.attachEvent("onload",g):a.addEventListener("load",g,!1);}();
+	</script>
+    <script>
+        var boxwidget = document.getElementById('box-widget-icon');
+        window.addEventListener('goftino_ready', function() {
+            var currentRoute = "page.credit.index";
+            if (window.innerWidth < 1024 && (currentRoute == 'page.credit.index' || currentRoute ==
+                    'page.credit.indexMobile')) {
+                Goftino.setWidget({
+                    hasIcon: false,
+                    hasSound: false,
+                });
+                var headerChatBtn = document.getElementById('header_chat_btn');
+                if (headerChatBtn) {
+                    headerChatBtn.addEventListener('click', () => {
+                        Goftino.open();
+                    })
+                }
+            }
+            var header_btn_chat2 = document.getElementById('header_btn_chat2');
+            if (header_btn_chat2) {
+                header_btn_chat2.addEventListener('click', () => {
+                    Goftino.open();
+                })
+            }
+            window.addEventListener('resize', function() {
+                currentRoute = "page.credit.index";
+                if (window.innerWidth < 1024 && (currentRoute == 'page.credit.index' || currentRoute ==
+                        'page.credit.indexMobile')) {
+                    Goftino.setWidget({
+                        hasIcon: false,
+                        hasSound: false,
+                    });
+                    if (boxwidget) {
+                        boxwidget.classList.add('hidden');
+                    }
+                    headerChatBtn = document.getElementById('header_chat_btn');
+                    if (headerChatBtn) {
+                        headerChatBtn.addEventListener('click', () => {
+                            Goftino.open();
+                        })
+                    }
+                }
+                header_btn_chat2 = document.getElementById('header_btn_chat2');
+                if (boxwidget) {
+                    boxwidget.classList.remove('hidden');
+                }
+                if (header_btn_chat2) {
+                    header_btn_chat2.addEventListener('click', () => {
+                        Goftino.open();
+                    })
+                }
+            });
+        });
+    </script>
+    <!---end GOFTINO code--->
+    @livewireScriptConfig
+</body>
+
+</html>

resources/views/components/layouts/home/master.blade.php

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex, nofollow">
+
+    <title>{{ $title ?? 'Page Title' }}</title>
+    <script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
+
+    <link rel="stylesheet" href="{{asset('swiper/swiper-bundle.css')}}">
+    <script src="{{asset('swiper/swiper-bundle.js')}}"></script>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @livewireStyles
+
+    <style>
+        .cke_dialog_ui_input_file {
+            height: max-content !important;
+        }
+
+        .cke_notification {
+            display: none !important;
+        }
+
+        .swiper-button-next::after,
+        .swiper-button-prev::after,
+        .swiper-rtl .swiper-button-prev:after,
+        .swiper-rtl .swiper-button-next:after {
+            content: "";
+        }
+    </style>
+</head>
+
+<body dir="rtl">
+    <div class="w-full flex justify-center">
+
+        <div class="w-[75%] ">
+            {{ $slot }}
+        </div>
+
+        @stack('script_js')
+        @livewireScriptConfig
+
+    </div>
+</body>
+
+</html>

resources/views/components/layouts/home/partial/header.blade.php

@@ -0,0 +1,51 @@
+<div>
+
+    <div class="w-full mx-auto flex justify-center bg-[#191a1f]">
+        <div class="flex w-[75%] py-10 items-center justify-between">
+            <div>
+                <h1 class="text-white text-xl">
+                    boliza
+                </h1>
+            </div>
+
+            <div class="w-1/3">
+                <div class="w-full flex justify-between">
+                    <a class="text-white" href="{{route('index')}}" wire:navigate>خانه</a>
+                    <a class="text-white" href="#">صفحات</a>
+                    <a class="text-white" href="#">لیست مقالات</a>
+                    <a class="text-white" href="#">مگامنو</a>
+                    <a class="text-white" href="#">داشبورد</a>
+
+                </div>
+            </div>
+
+            <div>
+                <div class="flex gap-5">
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="w-full mx-auto flex justify-center bg-[#191a1f]">
+        <div class="flex w-[75%] p-3 bg-[#192134] rounded items-center justify-between">
+            <div>
+                <div>
+                    <button class="py-2 px-1 rounded text-white bg-[#2163e8]"> اخبار امروز </button>
+                </div>
+            </div>
+
+            <div class="">
+                <div class=" flex gap-3">
+                    <button class=" rounded-full text-[#3c3f48] bg-[#191a1f] content-center"> <span class="px-1.5 ">
+                            < </span> </button>
+                    <button class="  rounded-full text-[#3c3f48] bg-[#191a1f] content-center"> <span class="px-1.5"> > </span> </button>
+
+                </div>
+            </div>
+
+
+        </div>
+    </div>
+
+</div>

resources/views/components/layouts/panel/master.blade.php

@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex, nofollow">
+    <link rel="icon" type="image/png" href="{{asset('image/logo.png')}}">
+    <title>{{ $title ?? 'Page Title' }}</title>
+    <script data-navigate-once src="{{ asset('ckeditor/ckeditor.js') }}"></script>
+
+    <script  data-navigate-once src="{{asset('js/tailwind.js')}}"></script>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+
+    <style type="text/tailwindcss">
+        @layer utilities {
+          .content-auto {
+            content-visibility: auto;
+          }
+        }
+    </style>
+
+    <style>
+        @font-face {
+            font-family: iransans;
+            font-style: normal;
+            font-weight: bold;
+            src: url('{{asset('fonts/IRANSansX-Bold.woff')}}') format('woff'),
+        }
+        #nprogress .bar , .spinner{
+                    z-index: 3000 !important;
+            }
+        @font-face {
+            font-family: iransans;
+            font-style: normal;
+            font-weight: normal;
+            src: url('{{asset('fonts/IRANSansXV.woff')}}') format('woff'),
+        }
+
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+
+        .bg-ahrom {
+            background-color: rgb(8, 70, 66) !important;
+        }
+
+        .bg-preveBackQuiz {
+            background-color: rgb(223, 229, 231) !important;
+        }
+
+        .position-fixed {
+            position: fixed !important;
+            top: 0 !important;
+        }
+
+        .trans_all {
+            transition: all ease .4s;
+        }
+
+        .animation-open {
+            transform: translateY(-32px);
+        }
+
+        svg {
+            pointer-events: none;
+        }
+
+        .items-center {
+            align-items: center !important;
+        }
+
+        .animation-open2 {
+            transform: translateY(1px);
+        }
+
+        .btn {
+            height: 3.25rem;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+            border-radius: 1rem;
+            padding-left: 2rem;
+            padding-right: 2rem;
+            font-size: .875rem;
+            line-height: 1.25rem;
+            font-weight: 500 !important;
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+            transition-duration: .3s;
+            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+        }
+
+        .font-semibold {
+            font-weight: 500 !important;
+        }
+
+        .text-red-800 {
+            color: #f43f5e !important;
+        }
+
+        .bg-gradiant-slide {
+            background: rgb(66, 0, 0);
+            background: linear-gradient(135deg, rgba(66, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 53%, rgba(0, 51, 42, 1) 100%);
+        }
+
+        .split-button {
+            position: relative;
+            display: inline-block;
+            width: 100px;
+            height: 30px;
+            background: linear-gradient(135deg, #F65555 50%, #00B88A 50%);
+            color: white;
+            font-size: 13px;
+            font-weight: bold;
+            text-align: center;
+            line-height: 50px;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .split-button::before {
+            content: "فروش";
+            position: absolute;
+            top: 0;
+            left: 0;
+            padding-right: 4px;
+            padding-left: 4px;
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1;
+        }
+
+        .split-button::after {
+            content: "خرید";
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1;
+        }
+
+        .hoverCancel {
+            pointer-events: none;
+        }
+
+        .rectangleTest {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to right, green 0%, yellow 12.5%, orange 25%, red 37.5%, rgb(126, 4, 4) 50%, rgb(61, 2, 2) 75%, rgb(12, 0, 0) 100%);
+        }
+
+        .rectangle {
+            width: 100%;
+            height: 40px;
+            border-radius: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .tooltip-box {
+            position: relative;
+            display: inline-block;
+            background-color: #000;
+            color: white;
+            text-align: center;
+            padding: 3px 7px;
+            border-radius: .25rem;
+            margin-bottom: 15px;
+            font-size: 14px;
+        }
+
+        .text-red-800 {
+            color: #F65555 !important;
+        }
+
+        .text-green-800 {
+            color: #00B88A !important;
+        }
+
+        @media (min-width: 1023px) and (max-width: 10000px) {
+            .lg\:bg-hr {
+                background-color: #f4f7fb !important;
+            }
+        }
+    </style>
+
+    <style>
+        .fade-out {
+            overflow: hidden;
+            height: 4.5em;
+            transition: all .4s ease !important;
+            position: relative;
+        }
+
+        .fade-out:after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 1.5em;
+            transition: all .4s ease !important;
+            background: linear-gradient(to bottom, transparent, white);
+        }
+
+        .hidden {
+            display: none;
+        }
+    </style>
+
+     <style>
+        .cke_dialog_ui_input_file{
+            height: max-content !important;
+        }
+        .cke_notification {
+            display: none !important;
+        }
+    </style>
+
+
+
+    @stack('style_css')
+   @livewireStyles
+
+</head>
+<body dir="rtl">
+<x-layouts.panel.partial.header/>
+{{ $slot }}
+
+
+@stack('script_js')
+@livewireScriptConfig
+</body>
+</html>

resources/views/components/layouts/panel/partial/header.blade.php

@@ -0,0 +1,29 @@
+<div class="w-full bg-slate-200 px-20 py-3 ">
+    <div class="flex justify-between">
+        <div class="flex gap-5">
+            <a class=" @if( url()->current() == route('panel.index') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow" href="{{route('panel.index')}}" wire:navigate>مقالات</a>
+            @if(auth()->user()->type == 2)
+                <a class=" @if( url()->current() == route('panel.category.index') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow" href="{{route('panel.category.index')}}" wire:navigate>دسته بندی</a>
+{{--                <a class=" @if( url()->current() == route('panel.images') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow" href="{{route('panel.images')}}" wire:navigate>تصاویر</a>--}}
+{{--                <a class=" @if( url()->current() == route('panel.keywords') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow" href="{{route('panel.keywords')}}" wire:navigate>کلیدواژه</a>--}}
+                <a class=" @if( url()->current() == route('panel.dictionary') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow" href="{{route('panel.dictionary')}}" wire:navigate>فرهنگ لغت</a>
+                <a class=" @if( url()->current() == route('panel.comment') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow" href="{{route('panel.comment')}}" wire:navigate>کامنت</a>
+                <a class=" @if( url()->current() == route('panel.getnewslist') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow" href="{{route('panel.getnewslist')}}" wire:navigate>استعلام اخبار</a>
+            @endif
+            @if(auth()->user()->type != 3)
+                <a class=" @if( url()->current() == route('panel.search') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow"      href="{{route('panel.search')}}" wire:navigate>جستجو</a>
+            @endif
+            @if(auth()->user()->type == 2)
+{{--                <a class=" @if( url()->current() == route('panel.ads') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow"      href="{{route('panel.ads')}}" wire:navigate>تبلیغات</a>--}}
+                <a class=" @if( url()->current() == route('panel.keywordlist') ) bg-ahrom text-white @else bg-[#F9FAFB] @endif  px-2 rounded-2xl py-1 shadow"      href="{{route('panel.keywordlist')}}" wire:navigate>استعلام مقالات</a>
+            @endif
+        </div>
+        <div class=" flex gap-3">
+            <a href="{{route('panel.logout')}}" wire:navigate>خروج</a>
+            @if(auth()->user()->type != 2)
+                <a href="{{route('panel.register')}}" wire:navigate>عضویت</a>
+            @endif
+        </div>
+
+    </div>
+</div>

resources/views/custom-pagination.blade.php

@@ -0,0 +1,40 @@
+@if ($paginator->hasPages())
+<nav class="mt-6">
+    <ul class="pagination flex gap-4">
+        @if ($paginator->onFirstPage())
+        <li class="disabled"><span>&laquo;</span></li>
+        @else
+        <li><a href="{{ route('CategoryBlog', ['slug' => $slug, 'page' => $paginator->currentPage() - 1]) }}"
+                rel="prev">&laquo;</a></li>
+        @endif
+        @foreach ($paginator->links()->elements as $element)
+        @if (is_string($element))
+        <li class="disabled"><span>{{ $element }}</span></li>
+        @endif
+
+        @if (is_array($element))
+        @foreach ($element as $page => $url)
+        @if ($page == $paginator->currentPage())
+        <li class="active"><span>{{ $page }}</span></li>
+        @elseif(
+        $page == 1 ||
+        $page == $paginator->lastPage() ||
+        ($page >= $paginator->currentPage() - 1 && $page <= $paginator->currentPage() + 1))
+            <li><a
+                    href="{{ route('CategoryBlog', ['slug' => $slug, 'page' => $page]) }}">{{ $page }}</a>
+            </li>
+            @elseif($page == 2 || $page == $paginator->lastPage() - 1)
+            <li class="disabled"><span>...</span></li>
+            @endif
+            @endforeach
+            @endif
+            @endforeach
+
+            @if ($paginator->hasMorePages())
+            <li><a href="{{ route('CategoryBlog', ['slug' => $slug, 'page' => $paginator->currentPage() + 1]) }}" rel="next">&raquo;</a></li>
+            @else
+            <li class="disabled"><span>&raquo;</span></li>
+            @endif
+    </ul>
+</nav>
+@endif

resources/views/errors/403.blade.php

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>403 - Forbidden</title>
+</head>
+<body>
+    <h1>403 - دسترسی ممنوع</h1>
+    <p>شما اجازه دسترسی به این صفحه را ندارید.</p>
+</body>
+</html>

resources/views/livewire/category-blog.blade.php

@@ -0,0 +1,971 @@
+@push('style_css')
+<style>
+    .max-w-5xl {
+        max-width: 1600px !important;
+    }
+
+    .pagination {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        direction: ltr;
+    }
+
+    .pagination li {}
+
+    .pagination li a,
+    .pagination li span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /*background-color: #e9e9e9;*/
+        color: #000;
+        text-decoration: none;
+        border-radius: 50%;
+        width: 2rem;
+        height: 2rem;
+        padding-top: 3px;
+        transition: background-color 0.3s ease-in-out;
+    }
+
+    .pagination li span:hover,
+    .pagination li a:hover {
+        background-color: #e9e9e9;
+    }
+
+    .pagination li.active span {
+        background-color: #0875E1;
+        color: #ffffff;
+    }
+
+    @media screen and (max-width: 1200) {
+        .customxl\:grid-cols-3 {
+            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+        }
+    }
+
+
+    .text-sm.font-medium.text-center.border-b.border-\[\#e2e3eb\] ul li a.active {
+        border-bottom: 4px solid #0075e7;
+        color: #0075e7;
+    }
+
+    .header--above-sheet {
+        z-index: 10 !important;
+    }
+</style>
+@endpush
+
+@section('title')
+دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم
+@endsection
+
+<div>
+    <div x-data="{
+          isOpen: false,
+          observer: null,
+          isDragging: false,
+          startY: 0,
+          currentY: 0,
+          translateY: 1000, // start off-screen (adjust later)
+          selectedUrl: null,
+          selectedCatId: null,
+          fetchedSubCat:[],
+          fetchedParentCat: [],
+          selected_parent: null,
+          selected_sub_cat: {{ (isset($selectedSecondLevelCategory?->id)) ? $selectedSecondLevelCategory->id : 0 }},
+          selected_sub_sub_cat: {{ (isset($selectedThirdLevelCategory?->id)) ? $selectedThirdLevelCategory->id : 0 }},
+          selected_sub_parent: null,
+          fetchedSubSubCat: [],
+          allCats: null,
+          init() {
+            this.$wire.loadCategoriesAndChilds().then(data => {
+                this.allCats = data?.original
+            })
+          },
+          open() {
+            this.isOpen = true;
+                @if(isset($selectedTopLevelCategoryId))
+                this.handlePCatClick({{$selectedTopLevelCategoryId}}, true)
+                @endif
+                @if(isset($selectedThirdLevelCategory))
+                setTimeout(() => {
+                    this.handleSCatClick({{ $selectedSecondLevelCategory->id }}, true)
+                }, 500)
+                @endif
+            this.$nextTick(() => {
+                const header = document.querySelector('#main_header');
+                if (header) {
+                  header.style.zIndex = '10';
+
+                  // Start observing the header's style changes
+                  this.observer = new MutationObserver(mutations => {
+                    mutations.forEach(mutation => {
+                      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                        const currentZ = header.style.zIndex;
+                        if (this.isOpen && currentZ !== '10') {
+                          header.style.zIndex = '10'; // force back
+                          console.log('Resetting z-index to 10 because it was changed.');
+                        }
+                      }
+                    });
+                  });
+
+                  this.observer.observe(header, { attributes: true, attributeFilter: ['style'] });
+                }
+            });
+            this.translateY = 500; // start below view (adjust to your sheet height)
+            setTimeout(() => {
+              this.translateY = 0;
+            }, 10);
+            document.body.style.overflow = 'hidden';
+            {{--            window.dispatchEvent(new CustomEvent('sheet-opened'));--}}
+          },
+          close() {
+            this.translateY = 700; // animate down
+            setTimeout(() => {
+              this.isOpen = false;
+              this.translateY = 1000;
+            }, 200);
+            setTimeout(() => {
+                // Stop observing
+                  if (this.observer) {
+                    this.observer.disconnect();
+                    this.observer = null;
+                  }
+                const header = document.querySelector('#main_header');
+                if (header) {
+                  header.style.zIndex = '3000'; // restore or reset if needed
+                }
+            }, 400)
+            document.body.style.overflow = ''
+{{--            window.dispatchEvent(new CustomEvent('sheet-closed'));--}}
+          },
+          startDrag(event) {
+            this.isDragging = true;
+            this.startY = event.touches ? event.touches[0].clientY : event.clientY;
+            this.currentY = this.startY;
+          },
+          handlePCatClick(catId, ignore = false) {
+            if(!ignore) {
+                this.resetSubCat();
+                this.resetSubSubCat()
+            }
+            if (this.allCats) {
+                // Find the selected parent category by ID
+                const selectedCat = this.allCats.find(cat => cat.id === catId);
+                console.log(selectedCat?.children_recursive)
+                this.selected_parent = selectedCat ?? null
+
+                if (selectedCat && selectedCat?.children_recursive) {
+                    // Access subcategories (children)
+                    this.fetchedSubCat = selectedCat?.children_recursive;
+
+                    console.log('Subcategories:', this.fetchedSubCat);
+                } else {
+                    this.fetchedSubCat = [];  // No subcategories found
+                }
+            }
+{{--            fetch(`{{url('api/category')}}${`/` + catId + `?is_news=` + is_news}`)--}}
+{{--                .then(response => response.json())--}}
+{{--                .then(data => {--}}
+{{--                    this.fetchedParentCat = data?.prents ?? [];--}}
+{{--                    this.fetchedSubCat = data?.sub_category ?? [];--}}
+{{--                    this.selected_parent = data?.selected_parent ?? null--}}
+{{--                    console.log(data)--}}
+{{--                })--}}
+{{--                .catch(error => {--}}
+{{--                    console.error('Error:', error);--}}
+{{--                });--}}
+          },
+          handleSCatClick(catId, ignore = false) {
+            if(!ignore) {
+                this.resetSubSubCat()
+            }
+             if (this.fetchedSubCat) {
+                // Find the selected parent category by ID
+                const selectedCat = this.fetchedSubCat.find(cat => cat.id === catId);
+                console.log(selectedCat?.children_recursive)
+                this.selected_sub_parent = selectedCat ?? null
+
+                if (selectedCat && selectedCat?.children_recursive) {
+                    // Access subcategories (children)
+                    this.fetchedSubSubCat = selectedCat?.children_recursive;
+
+                    console.log('SubSubcategories:', this.fetchedSubSubCat);
+                } else {
+                    this.fetchedSubSubCat = [];  // No subcategories found
+                }
+            }
+{{--            fetch(`{{url('api/sub-category')}}${`/` + catId + `?is_news=` + is_news}`)--}}
+{{--                .then(response => response.json())--}}
+{{--                .then(data => {--}}
+{{--                    this.fetchedSubSubCat = data?.sub_sub_category ?? [];--}}
+{{--                    this.selected_sub_parent = data?.sub_selected_parent ?? null--}}
+{{--                    console.log(data)--}}
+{{--                })--}}
+{{--                .catch(error => {--}}
+{{--                    console.error('Error:', error);--}}
+{{--                });--}}
+          },
+          resetSubCat() {
+            this.fetchedParentCat = [];
+            this.fetchedSubCat = [];
+            this.selected_parent = null;
+            this.selected_sub_cat = 0;
+            this.selected_sub_sub_cat = 0;
+          },
+          resetSubSubCat() {
+            this.fetchedSubSubCat = [];
+            this.selected_sub_parent = null;
+            this.selected_sub_sub_cat = 0;
+          },
+          drag(event) {
+            if (!this.isDragging) return;
+            this.currentY = event.touches ? event.touches[0].clientY : event.clientY;
+            let delta = this.currentY - this.startY;
+            if (delta > 0) {
+              this.translateY = delta;
+            } else {
+              this.translateY = 0;
+            }
+          },
+          endDrag() {
+            this.isDragging = false;
+            if (this.translateY > 100) {
+              this.close();
+            } else {
+              this.translateY = 0;
+            }
+          },
+          watch: {
+              selectedUrl(value) {
+                @this.set('selectedUrl', value);
+              }
+            },
+        }" @keydown.escape.window="close()"
+        class="visible relative z-10 mx-auto flex max-w-5xl flex-col items-center px-4 py-8 lg:flex-col lg:justify-between">
+        <div class="text-[#16205b] my-3 w-full font-bold text-[16px] lg:text-[18px] text-start items-center flex gap-2">
+            <div class="text-[#16205b] my-3 w-full font-bold text-[16px] lg:text-[18px] text-start items-center flex gap-2">
+                <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
+                <span class="text-[#16205b]">
+                    @if ($blogOrNotBlog == 'blog')
+                    مطالب {{ $title }}
+                    @else
+                    {{ $title }}
+                    @endif
+                </span>
+            </div>
+            <button
+                @click="open()"
+                wire:loading.attr="disabled"
+                wire:target="loadCategoriesAndChilds,goToCategory"
+                x-cloak
+                class="bg-gray-100 items-center justify-center py-2 px-2 rounded-full z-20 flex lg:hidden"
+                type="button">
+                <svg wire:loading.remove
+                    wire:target="goToCategory,loadCategoriesAndChilds,generateSlugAndNavigate" fill="#000000" height="18px" width="18px" class="dark-fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <path d="M0 73.7C0 50.7 18.7 32 41.7 32H470.3c23 0 41.7 18.7 41.7 41.7c0 9.6-3.3 18.9-9.4 26.3L336 304.5V447.7c0 17.8-14.5 32.3-32.3 32.3c-7.3 0-14.4-2.5-20.1-7l-92.5-73.4c-9.6-7.6-15.1-19.1-15.1-31.3V304.5L9.4 100C3.3 92.6 0 83.3 0 73.7zM55 80L218.6 280.8c3.5 4.3 5.4 9.6 5.4 15.2v68.4l64 50.8V296c0-5.5 1.9-10.9 5.4-15.2L457 80H55z"></path>
+                </svg>
+                <svg wire:loading wire:target="goToCategory,loadCategoriesAndChilds,generateSlugAndNavigate" class=" animate-spin text-black w-[18px] h-[18px] stroke-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Backdrop -->
+        <div
+            x-show="isOpen"
+            @click="close()"
+            x-transition.opacity
+            class="fixed inset-0 bg-black bg-opacity-50 z-40"
+            style="display: none;"></div>
+
+        <!-- Bottom Sheet -->
+        <div
+            x-show="isOpen"
+            x-cloak
+            style="will-change: transform;"
+            :style="`transform: translateY(${translateY}px); transition: transform 300ms ease`"
+            class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl shadow-xl pt-4 z-50">
+            <div
+                @touchstart="startDrag($event)"
+                @touchmove.prevent="drag($event)"
+                @touchend="endDrag()"
+                @mousedown="startDrag($event)"
+                @mousemove.prevent="drag($event)"
+                @mouseup="endDrag()"
+                @mouseleave="isDragging && endDrag()"
+                class="w-12 h-1.5 bg-gray-300 rounded mx-auto mb-4 cursor-grab"
+                :class="{ 'cursor-grabbing': isDragging }"></div>
+            <!-- Sheet Content -->
+            <div class="h-fit max-h-[70vh] overflow-y-auto no-scrollbar rounded-2xl space-y-1 mt-3 relative">
+
+                {{-- <div wire:loading wire:target="goToCategory" class="fixed inset-0 bg-black bg-opacity-50 z-50">--}}
+                {{-- <svg class="mr-3 -ml-1 size-5 animate-spin text-white absolute top-[45%] right-[45%]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>--}}
+                {{-- </div>--}}
+                <div x-data="{
+                            selectedId: @js($selectedTopLevelCategoryId ?? ($is_news ? (is_array($category) ? $category['id'] : $category->id) : 0)),
+                            scrollToSelected() {
+                                this.$nextTick(() => {
+                                    const el = this.$refs['category-' + this.selectedId];
+                                    if (el) {
+                                        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                                    }
+                                });
+                            }
+                        }"
+                    x-init="scrollToSelected()">
+                    <ul
+                        {{--                        class="flex items-center  py-3 -mb-px bg-gray-100 rounded-2xl relative">--}}
+                        class="flex items-center  py-3 -mb-px rounded-2xl relative">
+                        <div class="w-full relative">
+                            {{-- <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">--}}
+                            <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3  pb-3">
+                                <span>دسته‌بندی‌ها</span>
+                            </li>
+                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <div
+                                    {{--                                   wire:navigate--}}
+
+                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
+                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
+                                    aria-current="page">
+                                    <input
+                                        {{-- wire:click="goToCategory(`{{ $is_news ? 'news' : 'all' }}`, `{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}`)" --}}
+                                        {{-- @click="selectedId = {{ ($is_news && url()->current() == route('NewsCategory.index') || $selectedUrl == route('NewsCategory.index') || $selectedUrl == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }};selectedUrl=`{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}`" --}}
+                                        @click="handlePCatClick({{ $is_news ? $selectedTopLevelCategoryId : 0 }});selectedId={{ $is_news ? $selectedTopLevelCategoryId : 0 }};selectedCatId = {{ $is_news ? $selectedTopLevelCategoryId : 0}};"
+                                        :checked="selectedId == {{ $is_news ? $selectedTopLevelCategoryId : 0}}"
+                                        name="mpc"
+                                        id="mpc-0"
+                                        type="radio" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) checked @endif>
+                                    <label for="mpc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
+                                        همه
+                                    </label>
+                                </div>
+                            </li>
+                            @foreach ($parentCategories->sortByDesc('priority') as $parent)
+                            <li x-ref="category-{{ $parent->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <div
+                                    {{--                                       wire:navigate--}}
+
+                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
+                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
+                                    aria-current="page">
+                                    <input
+                                        {{--                                            wire:click="goToCategory(`{{ $parent->slug }}`, `{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}`)"--}}
+                                        {{--                                            @click="selectedId = {{ $parent->id }};selectedUrl=`{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}`"--}}
+                                        {{--                                                @click="handlePCatClick({{ $parent->id }}, {{ $is_news ? 1 : 0 }});selectedCatId={{$parent->id}};"--}}
+                                        @click="handlePCatClick({{ $parent->id }});selectedCatId = {{$parent->id}}"
+                                        :checked="selectedId == {{ $parent->id }}" name="mpc" id="mpc-{{ $parent->id }}" type="radio" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $parent->id == $selectedTopLevelCategoryId) checked @endif>
+                                    <label for="mpc-{{ $parent->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
+                                        {{ $parent->title }}
+                                    </label>
+                                </div>
+                            </li>
+                            @endforeach
+                        </div>
+                    </ul>
+                </div>
+
+                <ul x-show="fetchedSubCat.length > 0" class="flex items-center  py-3 -mb-px  rounded-2xl">
+                    <div class="w-full relative">
+                        <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3 pb-3">
+                            <span>دسته‌بندی‌ <span x-text="selected_parent?.title"></span></span>
+                        </li>
+
+                        <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                            <div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer" aria-current="page">
+                                <input
+                                    type="radio"
+                                    name="mcc"
+                                    id="mcc-0"
+                                    class="rounded-[4px] cursor-pointer border-2"
+                                    :checked="selected_sub_cat == 0"
+                                    {{--                                    @click="handlePCatClick(selected_parent?.id, {{ $is_news ? 1 : 0 }});selected_sub_cat=0;selectedCatId=selected_parent?.id;"--}}
+                                    @click="selected_sub_cat = 0;selectedCatId = selected_parent?.id;">
+                                <label for="mcc-0" class="w-full cursor-pointer px-3 py-3 border-b">
+                                    همه
+                                </label>
+                            </div>
+                        </li>
+
+                        <template x-for="(item, index) in fetchedSubCat" :key="item.id">
+                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer">
+                                    <input
+                                        type="radio"
+                                        :name="'mcc'"
+                                        :id="`mcc-${item.id}`"
+                                        class="rounded-[4px] cursor-pointer border-2"
+                                        :checked="selected_sub_cat == item.id"
+                                        @click="selected_sub_cat = item.id;handleSCatClick(item.id);selectedCatId = item?.id">
+                                    <label
+                                        :for="`mcc-${item.id}`"
+                                        :class="index !== fetchedSubCat.length - 1 ? 'border-b' : ''"
+                                        class="w-full cursor-pointer px-3 py-3"
+                                        x-text="item.title"></label>
+                                </div>
+                            </li>
+                        </template>
+                    </div>
+                </ul>
+
+                <ul x-show="fetchedSubSubCat.length > 0" class="flex items-center  py-3 -mb-px  rounded-2xl">
+                    <div class="w-full relative">
+                        <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3 pb-3">
+                            <span>دسته‌بندی‌ <span x-text="selected_sub_parent?.title"></span></span>
+                        </li>
+
+                        <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                            <div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer" aria-current="page">
+                                <input
+                                    type="radio"
+                                    name="mss"
+                                    id="mss-0"
+                                    class="rounded-[4px] cursor-pointer border-2"
+                                    :checked="selected_sub_sub_cat === 0"
+                                    @click="selected_sub_sub_cat = 0;selectedCatId = selected_sub_parent?.id">
+                                <label for="mss-0" class="w-full cursor-pointer px-3 py-3 border-b">
+                                    همه
+                                </label>
+                            </div>
+                        </li>
+
+                        <template x-for="(item, index) in fetchedSubSubCat" :key="item.id">
+                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer">
+                                    <input
+                                        type="radio"
+                                        :name="'mss'"
+                                        :id="`mss-${item.id}`"
+                                        class="rounded-[4px] cursor-pointer border-2"
+                                        :checked="selected_sub_sub_cat === item.id"
+                                        @click="selected_sub_sub_cat = item.id;selectedCatId = item?.id">
+                                    <label
+                                        :for="`mss-${item.id}`"
+                                        :class="index !== fetchedSubSubCat.length - 1 ? 'border-b' : ''"
+                                        class="w-full cursor-pointer px-3 py-3"
+                                        x-text="item.title"></label>
+                                </div>
+                            </li>
+                        </template>
+                    </div>
+                </ul>
+
+                <div class="sticky bottom-0 bg-white border-t p-4 flex items-center justify-between gap-2">
+                    <div @navigate-to.window="Livewire.navigate($event.detail)" class="w-full" x-data="{ isNews: {{ $is_news ? 1 : 0 }} }">
+                        {{-- <button--}}
+                        {{-- class="w-full bg-blue-600 text-white py-2 rounded-md"--}}
+                        {{-- wire:navigate--}}
+                        {{-- wire:click="goToCategory(selectedCatId, isNews)"--}}
+                        {{-- @click="close()"--}}
+                        {{-- :disabled="selectedCatId < 0"--}}
+                        {{-- @click="if (selectedCatId >= 0) { $wire.goToCategory(selectedCatId, isNews); close(); }"--}}
+                        {{-- >--}}
+                        {{-- ثبت--}}
+                        {{-- </button>--}}
+                        <button
+                            class="w-full bg-blue-600 text-white py-2 rounded-md"
+                            wire:click="generateSlugAndNavigate(selectedCatId, {{ $is_news ? 'true' : 'false' }})"
+                            @click="close()"
+                            :disabled="selectedCatId < 0">
+                            ثبت
+                        </button>
+                    </div>
+                    <button
+                        class="w-full border border-red-600 text-red-600 py-2 rounded-md"
+                        @click="close()">
+                        بستن
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="w-full mb-6">
+            <div class="text-sm font-medium text-center border-b border-[#e2e3eb] py-3">
+                <ul class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap -mb-px">
+                    @if (!$is_news )
+                    <!-- mag -->
+                    <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
+                        <a href="{{ route('CategoryBlog.index', ['slug' => 'all']).'/' }}"
+                            wire:navigate
+                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
+                            aria-current="page">همه دسته‌ها</a>
+                    </li>
+
+                    {{-- @if ($category['id'] == 0)--}}
+                    {{-- <!-- main mag show-->--}}
+                    @foreach ($parentCategories->sortByDesc('priority') as $parent)
+                    <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
+                        @if(isset($topParent->id))
+                        <a href="{{ route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
+                            wire:navigate
+                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $topParent->id == $parent->id)  bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
+                            aria-current="page">{{ $parent->title }}</a>
+                        @else
+                        <a href="{{ route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
+                            wire:navigate
+                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page )  bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
+                            aria-current="page">{{ $parent->title }}</a>
+                        @endif
+                    </li>
+                    @endforeach
+                    {{-- @else--}}
+                    {{-- --}}
+                    {{-- @endif--}}
+                    @else
+                    <!-- news -->
+
+                    {{-- @if ($category['slug'] == 'news')--}}
+                    <!-- nain news-->
+                    <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
+                        <a href="{{ route('NewsCategory.index').'/' }}"
+                            wire:navigate
+                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page || $selectedTopLevelCategoryId == 15 ) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
+                            aria-current="page">همه اخبار</a>
+                    </li>
+                    @foreach ($parentCategories->sortByDesc('priority') as $parent)
+                    <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
+                        @if(isset($category))
+                        <a href="{{ route('NewsCategory.show', ['slug' => $parent->slug]).'/' }}"
+                            wire:navigate
+                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) . '/page/' . $page || (is_array($category) ? $category['id'] : $category->id) == $parent->id) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
+                            aria-current="page">{{ $parent->title }}</a>
+                        @else
+                        <a href="{{ route('NewsCategory.show', ['slug' => $parent->slug]).'/' }}"
+                            wire:navigate
+                            class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
+                            aria-current="page">{{ $parent->title }}</a>
+                        @endif
+                    </li>
+                    @endforeach
+                    {{-- @else--}}
+                    {{-- <!-- sub news show-->--}}
+                    {{-- @php--}}
+                    {{-- $parentCategory = null;--}}
+                    {{-- if ($this->category->parent_id) {--}}
+                    {{-- $parentCategory = App\Models\Category::find($this->category->parent_id);--}}
+                    {{-- } elseif ($this->category->parent_below) {--}}
+                    {{-- $parentCategory = App\Models\Category::find($this->category->parent_below);--}}
+                    {{-- }--}}
+                    {{-- @endphp--}}
+                    {{-- @if ($parentCategory)--}}
+                    {{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
+                    {{-- <a href="{{ route('NewsCategory.index', ['slug' => $parentCategory->slug]).'/' }}"--}}
+                    {{-- wire:navigate--}}
+                    {{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index' ) || url()->current() == route('NewsCategory.index', ['slug' => $parentCategory->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
+                    {{-- aria-current="page">{{ $parentCategory->title }}</a>--}}
+                    {{-- </li>--}}
+                    {{-- @endif--}}
+
+                    {{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
+                    {{-- <a href="{{ route('NewsCategory.show', ['slug' => $category->slug]).'/' }}"--}}
+                    {{-- wire:navigate--}}
+                    {{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $category->slug]) || url()->current() == route('NewsCategory.index', ['slug' => $category->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
+                    {{-- aria-current="page">{{ $category->title }}</a>--}}
+                    {{-- </li>--}}
+
+                    {{-- @foreach ($categoriesNotBlog->sortByDesc('priority') as $item)--}}
+                    {{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
+                    {{-- <a href="{{ route('NewsCategory.show', ['slug' => $item['slug']]) .'/' }}"--}}
+                    {{-- wire:navigate--}}
+                    {{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index', ['slug' => $item['slug']]) || url()->current() == route('NewsCategory.index', ['slug' => $item['slug']]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
+                    {{-- aria-current="page">{{ $item['title'] }}</a>--}}
+                    {{-- </li>--}}
+                    {{-- @endforeach--}}
+                    {{-- @endif--}}
+                    @endif
+                </ul>
+            </div>
+        </div>
+        @if ($blogs && $blogs->count() > 0)
+        <div
+            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-9 justify-between gap-5 my-4 lg:my-8 w-full relative">
+            <div class="col-span-2 h-fit max-h-[83vh] rounded-2xl sticky top-[100px] space-y-1 hidden lg:block">
+                <div x-data="{
+                            selectedId: @js($selectedTopLevelCategoryId ?? ($is_news ? (is_array($category) ? $category['id'] : $category->id) : 0)),
+                            scrollToSelected() {
+                                this.$nextTick(() => {
+                                    const el = this.$refs['category-' + this.selectedId];
+                                    if (el) {
+                                        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                                    }
+                                });
+                            }
+                        }"
+                    x-init="scrollToSelected()">
+                    <ul
+                        class="flex items-center  py-3 -mb-px bg-gray-100 rounded-2xl relative">
+                        <div class="max-h-[25vh] scroll-smooth overflow-y-auto md:flex-wrap w-full relative" style="scrollbar-color: gray #F3F4F6 !important;">
+                            <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
+                                <span>دسته‌بندی‌ها</span>
+                            </li>
+                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <a href="{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}"
+                                    wire:navigate
+                                    @click.prevent="selectedId = {{ ($is_news && url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }}"
+                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
+                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
+                                    aria-current="page">
+                                    <input :checked="selectedId == {{ ($is_news && url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }}" name="pc-0" id="pc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) checked @endif>
+                                    <label for="pc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
+                                        همه
+                                    </label>
+                                </a>
+                            </li>
+                            @foreach ($parentCategories->sortByDesc('priority') as $parent)
+                            <li x-ref="category-{{ $parent->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
+                                    wire:navigate
+                                    @click.prevent="selectedId = {{ $parent->id }}"
+                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
+                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
+                                    aria-current="page">
+                                    <input :checked="selectedId === {{ $parent->id }}" name="pc-{{ $parent->id }}" id="pc-{{ $parent->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $parent->id == $selectedTopLevelCategoryId) checked @endif>
+                                    <label for="pc-{{ $parent->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
+                                        {{ $parent->title }}
+                                    </label>
+                                </a>
+                            </li>
+                            @endforeach
+                        </div>
+                    </ul>
+                </div>
+
+                @if($childCategories->isNotEmpty())
+                <div x-data="{
+                            selectedId: @js($selectedSecondLevelCategory->id ?? 0),
+                            scrollToSelected() {
+                                this.$nextTick(() => {
+                                    const el = this.$refs['psub_category_' + this.selectedId];
+                                    if (el) {
+                                        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                                    }
+                                });
+                            }
+                        }"
+                    x-init="scrollToSelected()">
+                    <ul class="flex items-center  py-3 -mb-px bg-gray-100 rounded-2xl">
+                        <div class="max-h-[30vh] scroll-smooth overflow-y-auto md:flex-wrap w-full" style="scrollbar-color: gray #F3F4F6 !important;">
+                            <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
+                                <span>دسته‌بندی‌ {{ $topParent->title }}</span>
+                            </li>
+                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $topParent->slug]).'/' : route('CategoryBlog.index', ['slug' => $topParent->slug]).'/' }}"
+                                    wire:navigate
+                                    @click.prevent="selectedId = 0"
+                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
+                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
+                                    aria-current="page">
+                                    <input :checked="selectedId == 0" name="cc-0" id="cc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $topParent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $topParent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $topParent->slug]) . '/page/' . $page) checked @endif>
+                                    <label for="cc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
+                                        همه
+                                    </label>
+                                </a>
+                            </li>
+                            @foreach ($childCategories->sortByDesc('priority') as $child)
+                            <li x-ref="psub_category_{{ $child->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $child->slug]).'/' : route('CategoryBlog.index', ['slug' => $child->slug]).'/' }}"
+                                    wire:navigate
+                                    @click.prevent="selectedId = {{ $child->id }}"
+                                    {{--                                       onclick="document.getElementById('pc-{{ $child->id }}').checked=true;"--}}
+                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
+                                    aria-current="page">
+                                    @if(isset($selectedSecondLevelCategory->id))
+                                    <input :checked="selectedId === {{ $child->id }}" name="cc-{{ $child->id }}" id="cc-{{ $child->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) . '/page/' . $page || $selectedSecondLevelCategory->id == $child->id) checked @endif>
+                                    @else
+                                    <input :checked="selectedId === {{ $child->id }}" name="cc-{{ $child->id }}" id="cc-{{ $child->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) . '/page/' . $page) checked @endif>
+                                    @endif
+                                    <label for="cc-{{ $child->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
+                                        {{ $child->title }}
+                                    </label>
+                                </a>
+                            </li>
+                            @endforeach
+                        </div>
+                    </ul>
+                </div>
+                @endif
+                @if($subChildCategories->isNotEmpty())
+                <div x-data="{
+                            selectedId: @js($category->id),
+                            scrollToSelected() {
+                                this.$nextTick(() => {
+                                    const el = this.$refs['sub_category_' + this.selectedId];
+                                    if (el) {
+                                        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                                    }
+                                });
+                            }
+                        }"
+                    x-init="scrollToSelected()">
+                    <ul class="flex items-center  py-3 -mb-px bg-gray-100 rounded-2xl">
+                        <div class="max-h-[20vh] scroll-smooth overflow-y-auto md:flex-wrap w-full relative" style="scrollbar-color: gray #F3F4F6 !important;">
+                            <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
+                                <span>دسته‌بندی‌ {{ $selectedSecondLevelCategory->title }}</span>
+                            </li>
+                            <li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $selectedSecondLevelCategory->slug]).'/' : route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]).'/' }}"
+                                    wire:navigate
+                                    @click.prevent="selectedId = {{ $selectedSecondLevelCategory->id }}"
+                                    {{--                                       onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
+                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
+                                    aria-current="page">
+                                    <input :checked="selectedId == {{ $selectedSecondLevelCategory->id }}" name="sc-0" id="sc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $selectedSecondLevelCategory->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]) . '/page/' . $page) checked @endif>
+                                    <label for="sc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
+                                        همه
+                                    </label>
+                                </a>
+                            </li>
+                            @foreach ($subChildCategories->sortByDesc('priority') as $subChild)
+                            <li x-ref="sub_category_{{ $subChild->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
+                                <a href="{{ $is_news ? route('NewsCategory.index', ['slug' => $subChild->slug]) : route('CategoryBlog.index', ['slug' => $subChild->slug]).'/' }}"
+                                    wire:navigate
+                                    @click.prevent="selectedId = {{ $subChild->id }}"
+                                    class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
+                                    aria-current="page">
+                                    {{-- @if(isset($selectedSecondLevelCategory->id))--}}
+                                    <input :checked="selectedId === {{ $subChild->id }}" name="sc-{{ $subChild->id }}" id="sc-{{ $subChild->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) . '/page/' . $page) checked @endif>
+                                    {{-- @else--}}
+                                    {{-- <input name="sc-{{ $subChild->id }}" id="sc-{{ $subChild->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) . '/page/' . $page) checked @endif>--}}
+                                    {{-- @endif--}}
+
+                                    <label for="sc-{{ $subChild->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
+                                        {{ $subChild->title }}
+                                    </label>
+                                </a>
+                            </li>
+                            @endforeach
+                        </div>
+                    </ul>
+                </div>
+                @endif
+            </div>
+            <div class="col-span-7 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 h-fit gap-5">
+                @foreach ($blogs as $index => $blog)
+                <div
+                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
+                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                        class="relative w-[80px] md:w-full">
+                        <img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
+                            src="{{ env('APP_URL_IMAGE').'images/'.$blog->image }}" alt="">
+                    </a>
+                    <div
+                        class="flex w-[74%] justify-start md:justify-normal flex-col md:w-full gap-2 h-full md:p-4">
+                        <a href="{{ route('detail', ['slug' => $blog->slug]).'/' }}" wire:navigate
+                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                            {!! $blog->subject !!}
+                        </a>
+                        <div class="md:block hidden text-[#16205b]">
+                            @php
+                            $preview = Str::limit($blog->preview, 80, '...');
+                            @endphp
+                            {!! $preview !!}
+                        </div>
+                        <div class="flex items-center gap-1 text-white md:mt-auto">
+                            <div class="hidden md:flex md:flex-col justify-center">
+                                <img class="bg-cover bg-center rounded-full size-8"
+                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
+                            </div>
+                            <div class="flex items-center justify-between w-full flex-wrap">
+                                <div class="flex items-center gap-1">
+                                    <div class="text-xs text-gray-600 flex flex-col justify-center hidden md:block">
+                                        {{ $blog->user->full_name }}
+                                    </div>
+                                    <span style="font-variation-settings: 'wght' 500;"
+                                        class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
+                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
+                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                                    </div>
+                                </div>
+                                <div class="text-xs text-gray-600 flex items-center gap-1">
+                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
+                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
+                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
+                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
+                                    </svg>
+                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                @endforeach
+            </div>
+        </div>
+
+        @if ($blogs->hasPages())
+        <nav class="mt-6">
+            <ul class="pagination flex gap-4">
+
+                {{-- First + Prev (only show if not on first page) --}}
+                @if (!$blogs->onFirstPage())
+                <li>
+                    <a class="pb-[4px]"
+                        href="{{ $is_news
+                            ? ($category['id'] == 0
+                                ? route('NewsCategory.index')
+                                : route('NewsCategory.show', ['slug' => $slug]))
+                            : route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
+                        wire:navigate rel="first">
+                        <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
+                            <path d="M139.099,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
+                            <path d="M43.716,113.46c7.308-7.331,14.332-14.404,21.387-21.447,20.573-20.538,41.144-41.078,61.751-61.582,4.559-4.537,6.232-9.891,4.569-16.05-1.631-6.039-5.739-9.877-11.817-11.285-5.789-1.341-10.825,.331-15.034,4.542-11.729,11.737-23.476,23.456-35.212,35.187-19.236,19.228-38.475,38.454-57.701,57.693-8.661,8.666-8.718,17.444-.124,26.044,30.958,30.975,62.066,61.802,92.832,92.966,9.589,9.713,24.356,6.018,27.766-5.415,1.972-6.612,.065-12.214-4.786-17.025-12.492-12.387-24.921-24.836-37.373-37.262-14.661-14.629-29.321-29.258-43.976-43.892-.696-.695-1.336-1.444-2.282-2.474Z" />
+                        </svg>
+                    </a>
+                </li>
+                @if(($blogs->currentPage() - 1) === 1)
+                <li>
+                    <a class="pb-[4px]"
+                        href="{{ $is_news
+                            ? ($category['id'] == 0
+                                ? route('NewsCategory.index')
+                                : route('NewsCategory.show', ['slug' => $slug]))
+                            : route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
+                        wire:navigate rel="prev">
+                        <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
+                            <path d="M91.264,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
+                        </svg>
+                    </a>
+                </li>
+                @else
+                <li>
+                    <a class="pb-[4px]"
+                        href="{{ $is_news
+                            ? ($category['id'] == 0
+                                ? route('NewsCategorySimple', ['page' => $blogs->currentPage() - 1])
+                                : route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]))
+                            : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]).'/' }}"
+                        wire:navigate rel="prev">
+                        <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
+                            <path d="M91.264,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
+                        </svg>
+                    </a>
+                </li>
+                @endif
+                @endif
+                {{-- Page Numbers: show only 2 before and 2 after current --}}
+                @for ($page = max(1, $blogs->currentPage() - 2); $page <= min($blogs->lastPage(), $blogs->currentPage() + 2); $page++)
+                    @if ($page == $blogs->currentPage())
+                    <li class="active"><span>{{ $page }}</span></li>
+                    @else
+                    @if($page == 1)
+                    <li>
+                        <a href="{{ $is_news
+                                            ? ($category['id'] == 0
+                                                ? route('NewsCategory.index')
+                                                : route('NewsCategory.show', ['slug' => $slug]))
+                                            : route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
+                            wire:navigate>{{ $page }}</a>
+                    </li>
+                    @else
+                    <li>
+                        <a href="{{ $is_news
+                                            ? ($category['id'] == 0
+                                                ? route('NewsCategorySimple', ['page' => $page])
+                                                : route('NewsCategory.show.page', ['slug' => $slug, 'page' => $page]))
+                                            : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $page]).'/' }}"
+                            wire:navigate>{{ $page }}</a>
+                    </li>
+                    @endif
+                    @endif
+                    @endfor
+
+                    {{-- Next + Last (only show if not on last page) --}}
+                    @if ($blogs->hasMorePages())
+                    <li>
+                        <a class="pb-[4px]"
+                            href="{{ $is_news
+                            ? ($category['id'] == 0
+                                ? route('NewsCategorySimple', ['page' => $blogs->currentPage() + 1])
+                                : route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]))
+                            : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]).'/' }}"
+                            wire:navigate rel="next">
+                            <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
+                                <path d="M142.646,112.233c-7.785-7.807-14.811-14.878-21.865-21.921-20.745-20.71-41.523-41.387-62.244-62.121-7.631-7.635-7.275-18.796,.662-24.879,5.824-4.463,14.02-4.42,19.781,.152,1.071,.85,2.04,1.834,3.01,2.803,30.792,30.774,61.581,61.55,92.362,92.334,8.813,8.814,8.798,17.48-.051,26.329-30.87,30.872-61.777,61.706-92.6,92.625-5.006,5.022-10.648,7.376-17.58,5.229-10.645-3.298-14.599-16.097-7.775-24.894,1.065-1.373,2.333-2.596,3.568-3.828,26.395-26.351,52.796-52.697,79.216-79.023,.96-.956,2.126-1.706,3.517-2.806Z" />
+                            </svg>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="pb-[4px]"
+                            href="{{ $is_news
+                            ? ($category['id'] == 0
+                                ? route('NewsCategorySimple', ['page' => $blogs->lastPage()])
+                                : route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->lastPage()]))
+                            : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->lastPage()]).'/' }}"
+                            wire:navigate rel="last">
+                            <svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
+                                <path d="M94.81,113.926c-7.785-7.807-14.811-14.878-21.865-21.921C52.199,71.296,31.422,50.618,10.7,29.885c-7.631-7.635-7.275-18.796,.662-24.879,5.824-4.463,14.02-4.42,19.781,.152,1.071,.85,2.04,1.834,3.01,2.803,30.792,30.774,61.581,61.55,92.362,92.334,8.813,8.814,8.798,17.48-.051,26.329-30.87,30.872-61.777,61.706-92.6,92.625-5.006,5.022-10.648,7.376-17.58,5.229-10.645-3.298-14.599-16.097-7.775-24.894,1.065-1.373,2.333-2.596,3.568-3.828,26.395-26.351,52.796-52.697,79.216-79.023,.96-.956,2.126-1.706,3.517-2.806Z" />
+                                <path d="M190.194,113.46c-7.308-7.331-14.332-14.404-21.387-21.447-20.573-20.538-41.144-41.078-61.751-61.582-4.559-4.537-6.232-9.891-4.569-16.05,1.631-6.039,5.739-9.877,11.817-11.285,5.789-1.341,10.825,.331,15.034,4.542,11.729,11.737,23.476,23.456,35.212,35.187,19.236,19.228,38.475,38.454,57.701,57.693,8.661,8.666,8.718,17.444,.124,26.044-30.958,30.975-62.066,61.802-92.832,92.966-9.589,9.713-24.356,6.018-27.766-5.415-1.972-6.612-.065-12.214,4.786-17.025,12.492-12.387,24.921-24.836,37.373-37.262,14.661-14.629,29.321-29.258,43.976-43.892,.696-.695,1.336-1.444,2.282-2.474Z" />
+                            </svg>
+                        </a>
+                    </li>
+                    @endif
+
+            </ul>
+        </nav>
+        @endif
+
+        @section('metaSEO')
+        <meta name="description"
+            content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
+        @if ($blogs->currentPage() > 1)
+        @if ($blogs->currentPage() == 2)
+        <link rel="prev"
+            href="{{ $is_news ? route('NewsCategory.index', ['slug' => $slug]) : route('CategoryBlog.index', ['slug' => $slug]) .'/'}}" />
+        @else
+        <link rel="prev"
+            href="{{ $is_news ? route('NewsCategorySimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]) : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]) .'/'}} " />
+        @endif
+        @endif
+        <link rel="canonical"
+            href="{{ $is_news ? route('NewsCategory.index', ['slug' => $slug]).'/' : route('CategoryBlog.index', ['slug' => $slug]).'/' }}" />
+        <link rel="next"
+            href="{{ $blogs->currentPage() < $blogs->lastPage() ? ($is_news ? route('NewsCategorySimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]) : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1])) : '' }}/" />
+        <meta property="og:locale" content="fa_IR" />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content="دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم" />
+        <meta property="og:description"
+            content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
+        <meta property="og:url" content="{{ url()->current() }}/" />
+        <meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم" />
+        @if (!$is_news && $slug == 'all')
+        <meta name='robots'
+            content='noindex, nofollow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
+        @endif
+        @endsection
+        @else
+        <div class="text-center text-gray-500">
+            هیچ مطلبی یافت نشد.
+        </div>
+        @section('metaSEO')
+        <meta name="description"
+            content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
+        <meta property="og:locale" content="fa_IR" />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content="دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم" />
+        <meta property="og:description"
+            content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
+        <meta property="og:url" content="{{ url()->current() }}/" />
+        <meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم" />
+        @if (!$is_news && $slug == 'all')
+        <meta name='robots'
+            content='noindex, nofollow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
+        @endif
+        @endsection
+        @endif
+    </div>
+</div>
+@script
+<script>
+    document.addEventListener('livewire:update', () => {
+        const alpineComponent = document.querySelector('[x-data]');
+        if (alpineComponent && alpineComponent.__x) {
+            alpineComponent.__x.$data.loadCats();
+        }
+    });
+</script>
+@endscript

resources/views/livewire/dictionary.blade.php

@@ -0,0 +1,25 @@
+@push('style_css')
+<style>
+    .max-w-5xl {
+        max-width: 1600px !important;
+    }
+
+    .max-w-4xl {
+        max-width: 1400px !important;
+    }
+</style>
+@endpush
+
+<div>
+    <div class="visible relative z-10 mx-auto flex max-w-5xl flex-col px-4 py-20 lg:flex-col">
+        <h2 class="pb-4 border-b mb-4 text-[22px] lg:text-[26px]">
+            فرهنگ لغت
+        </h2>
+        <div class="flex flex-nowrap items-center gap-3">
+            @foreach ($dictionareis as $item)
+            <a class="p-4 border rounded-xl shadow" href="{{ url('/dictionary/show/' . $item->id) }}"
+                wire:navigate>{{ $item->title }}</a>
+            @endforeach
+        </div>
+    </div>
+</div>

resources/views/livewire/home.blade.php

@@ -0,0 +1,804 @@
+@push('style_css')
+<style>
+    .max-w-5xl {
+        max-width: 1600px !important;
+    }
+
+
+    .slider-container {
+        display: flex;
+        overflow-x: scroll;
+        scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .slider-item {
+        flex: 0 0 80%;
+        min-width: 80%;
+        scroll-snap-align: start;
+        margin-left: 1%;
+
+    }
+</style>
+@endpush
+
+
+@section('title')
+مجله خبری سرمایه گذاری اهرم - آموزش ارز دیجیتال و اخبار روز
+@endsection
+@section('metaSEO')
+<meta name="description"
+    content="در مجله خبری سرمایه گذاری اهرم  میتوانید به مقالات تخصصی درباره آموزش ارزهای دیجیتال و بلاکچین و پیگیری اخبار جدید دسترسی داشته باشید." />
+<link rel="canonical" href="{{ env('APP_URL') }}/" />
+<meta property="og:locale" content="fa_IR" />
+<meta property="og:type" content="website" />
+<meta property="og:title" content="مجله خبری سرمایه گذاری اهرم  - آموزش ارز دیجیتال و اخبار روز" />
+<meta property="og:description"
+    content="در مجله خبری سرمایه گذاری اهرم  میتوانید به مقالات تخصصی درباره آموزش ارزهای دیجیتال و بلاکچین و پیگیری اخبار جدید دسترسی داشته باشید." />
+<meta property="og:url" content="{{ env('APP_URL') }}/" />
+<meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم " />
+<script type="application/ld+json">
+    {
+        "@context": "https://schema.org/",
+        "@type": "WebSite",
+        "name": "سرمایه گذاری اهرم",
+        "url": "/",
+        "potentialAction": {
+            "@type": "SearchAction",
+            "target": "https://ahrominvest.ir/mag/search?q={search_term_string}",
+            "query-input": "required name=search_term_string"
+        }
+    }
+</script>
+@endsection
+
+<div class="mt-10 md:mt-0">
+    <button
+        class="fixed hidden left-4 bottom-4 z-20 rounded-2xl bg-ahrom p-3 text-white opacity-0 transition-opacity ease-out lg:bottom-6 lg:left-6 lg:p-4"
+        id="btnGoTop" title="Go to top">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
+            <polyline points="18 15 12 9 6 15"></polyline>
+        </svg>
+    </button>
+    @if (count($blogs2) > 0)
+    <div href="#"
+        class="text-black   hidden mb-3 font-bold px-4 pt-10   lg:my-8 text-[16px] lg:text-[20px] text-start items-center   gap-2">
+        <span> مطالب منتخب</span>
+    </div>
+    <div x-cloak x-show="window.innerWidth > 1024 "
+        class="visible relative z-10 mx-auto  max-w-5xl mb-5  flex-col items-center  px-4  lg:flex-row lg:justify-between no-scrollbar">
+        <div class="  w-full mt-3">
+            @php
+            $step = 0;
+            @endphp
+            <div
+                class="lg:grid mb-0 mt-5 lg:my-5 flex  lg:grid-cols-2 gap-4 lg:gap-1 lg:h-[60vh] overflow-scroll lg:overflow-hidden no-scrollbar">
+                @foreach ($blogs2 as $key => $item)
+                @php
+                if ($step == 0) {
+                $count = 0;
+                $step = 1;
+                }
+                @endphp
+                @endforeach
+                @if (isset($blogs2[$count]) )
+                <div lazy class="col-span-1 grid-cols-1 h-full  ">
+                    <div
+                        class="relative group rounded-xl overflow-hidden  h-[200px] lg:h-full lg:w-auto w-[300px]">
+                        <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}" wire:navigate
+                            class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
+                            <img src="{{  env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image   }}"
+                                alt="{{ $blogs2[$count]->slug }}" class="bg-cover bg-center w-full h-full ">
+                        </a>
+                        <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}" wire:navigate>
+                            <div class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
+                                @if (true)
+                                <div
+                                    class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                        viewBox="0 0 576 512">
+                                        <path fill="#ffffff"
+                                            d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
+                                    </svg>
+                                </div>
+                                @endif
+                                <div class="h-full flex flex-col gap-2 justify-end">
+
+                                    <div class="text-white text-sm">
+
+                                    </div>
+
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                    @php
+                    $count++;
+                    @endphp
+                </div>
+                @endif
+                <div class="col-span-1 lg:grid flex lg:grid-rows-2 gap-1">
+
+                    <div class="row-span-1 lg:grid lg:grid-cols-2 flex gap-4 lg:gap-1 ">
+                        @if (isset($blogs2[$count]) )
+                        <div class="relative group rounded-xl overflow-hidden h-full lg:w-auto w-[300px]">
+                            <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
+                                wire:navigate
+                                class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
+                                <img src="{{  env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
+                                    alt="{{ $blogs2[$count]->slug }}"
+                                    class="bg-cover bg-center w-full h-full ">
+                            </a>
+                            <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
+                                wire:navigate>
+                                <div class="relative p-7 h-full text-white rounded-xl overflow-hidden">
+                                    @if (true)
+                                    <div
+                                        class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                            height="20" viewBox="0 0 576 512">
+                                            <path fill="#ffffff"
+                                                d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
+                                        </svg>
+                                    </div>
+                                    @endif
+                                    <div class="h-full flex flex-col gap-2 justify-end">
+
+                                        <div class="text-white text-sm">
+
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
+
+                        @php
+                        $count++;
+                        @endphp
+                        @endif
+                        @if (isset($blogs2[$count]) )
+                        <div class="relative group rounded-xl overflow-hidden h-full lg:w-auto w-[300px]">
+                            <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
+                                wire:navigate
+                                class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
+                                <img src="{{  env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
+                                    alt="{{ $blogs2[$count]->slug }}"
+                                    class="bg-cover bg-center w-full h-full ">
+                            </a>
+                            <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
+                                wire:navigate>
+                                <div class="relative p-7 h-full text-white rounded-xl overflow-hidden">
+                                    @if (true)
+                                    <div
+                                        class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                            height="20" viewBox="0 0 576 512">
+                                            <path fill="#ffffff"
+                                                d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
+                                        </svg>
+                                    </div>
+                                    @endif
+                                    <div class="h-full flex flex-col gap-2 justify-end">
+
+                                        <div class="text-white text-sm">
+
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </a>
+                        </div>
+
+                        @php
+                        $count++;
+                        @endphp
+                        @endif
+                    </div>
+
+                    <div class="row-span-1 lg:grid lg:grid-cols-2 flex gap-4 lg:gap-1">
+                        {{-- order 3 --}}
+                        @if (isset($blogs2[$count]) )
+                        <div class="col-span-1  ">
+                            <div
+                                class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
+                                <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
+                                    wire:navigate
+                                    class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
+                                    <img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image  }}"
+                                        alt="{{ $blogs2[$count]->slug }}"
+                                        class="bg-cover bg-center w-full h-full ">
+                                </a>
+                                <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
+                                    wire:navigate>
+                                    <div
+                                        class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
+                                        @if (true)
+                                        <div
+                                            class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                                height="20" viewBox="0 0 576 512">
+                                                <path fill="#ffffff"
+                                                    d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
+                                            </svg>
+                                        </div>
+                                        @endif
+                                        <div class="h-full flex flex-col gap-2 justify-end">
+                                            <div class="  flex-wrap gap-2 items-center  hidden lg:flex">
+
+                                            </div>
+
+                                            <div class="text-white text-sm">
+
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+
+                            @php
+                            $count++;
+                            @endphp
+                        </div>
+                        @endif
+
+
+                        @if (isset($blogs2[$count]) )
+                        <div class="col-span-1  ">
+                            <div
+                                class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
+                                <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
+                                    wire:navigate
+                                    class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
+                                    <img src="{{  env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image   }}"
+                                        alt="{{ $blogs2[$count]->slug }}"
+                                        class="bg-cover bg-center w-full h-full ">
+                                </a>
+                                <a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
+                                    wire:navigate>
+                                    <div
+                                        class="relative  p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
+                                        @if (true)
+                                        <div
+                                            class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
+                                                height="20" viewBox="0 0 576 512">
+                                                <path fill="#ffffff"
+                                                    d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
+                                            </svg>
+                                        </div>
+                                        @endif
+                                        <div class="h-full flex flex-col gap-2 justify-end">
+                                            <div class="  flex-wrap gap-2 items-center  hidden lg:flex">
+
+                                            </div>
+
+                                            <div class="text-white text-sm">
+
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+
+                            @php
+                            $count++;
+                            @endphp
+                        </div>
+                        @endif
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div x-cloak x-data="{ show: window.innerWidth < 1024 }" x-show="show"
+        class="visible relative z-10 mt-10 mb-5 mx-auto   max-w-5xl  flex-col items-center  px-4  lg:flex-row lg:justify-between no-scrollbar">
+        <div class="slider-container gap-4   no-scrollbar w-full  ">
+            @php
+            $step = 0;
+            @endphp
+            @foreach ($blogs2 as $key => $item)
+            @if (isset($item) )
+            <div class="col-span-1 grid-cols-1 h-full slider-item">
+                <div class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto  ">
+                    <a href="{{ route('detail', ['slug' => $item->slug]) . '/' }}" wire:navigate
+                        class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
+                        <img src="{{ env('APP_URL_IMAGE').'images/'.$item->image   }}"
+                            alt="{{ $item->slug }}"
+                            class="bg-cover bg-center w-full h-full">
+                    </a>
+                    <a href="{{ route('detail', ['slug' => $item->slug]) . '/' }}" wire:navigate>
+                        <div class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
+                            @if (true)
+                            <div
+                                class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                    viewBox="0 0 576 512">
+                                    <path fill="#ffffff"
+                                        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
+                                </svg>
+                            </div>
+                            @endif
+                            <div class="h-full flex flex-col gap-2 justify-end">
+
+                                <div class="text-white text-sm"></div>
+
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            @endif
+            @endforeach
+        </div>
+    </div>
+    @endif
+
+    <div
+        class="visible relative z-10 mx-auto flex max-w-5xl flex-col items-center mt-8 px-4 lg:flex-col  lg:justify-between">
+        <div class="w-full mb-12">
+            <div class="mb-4 border-b   align-items-center justify-between flex ">
+                <h2 class="inline-block text-[18px]  pb-2 border-b-2 rounded-t-lg  text-[#0075e7] border-[#0075e7] ">
+                    مطالب</h2>
+                {{-- <div class="md:block hidden">--}}
+                {{-- @if ($selectedCategoryPosts)--}}
+                {{-- @foreach ($categories as $item)--}}
+                {{-- @if (count($item->blogs) > 0 && $selectedCategoryPosts == $item->id)--}}
+                {{-- <a class="text-[#16205b]   rounded-xl px-2 text-[16px]"--}}
+                {{-- href=" {{ route('CategoryBlog.index', ['slug' => $item->slug]) . '/' }}"--}}
+                {{-- wire:navigate>مشاهده همه</a>--}}
+                {{-- @endif--}}
+                {{-- @endforeach--}}
+                {{-- @else--}}
+                {{-- <a class="text-[#16205b]   rounded-xl px-2 text-[16px]"--}}
+                {{-- href=" {{ route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate>مشاهده--}}
+                {{-- همه</a>--}}
+                {{-- @endif--}}
+                {{-- </div>--}}
+            </div>
+
+            <div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
+                <button wire:click="resetCategory('posts')"
+                    class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
+                    :class="{
+                                'bg-blue-100 text-blue-600': !$wire.selectedCategoryPosts,
+                                'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryPosts
+                            }">
+                    آخرین مطالب
+                </button>
+
+                @foreach ($categories->sortByDesc('priority') as $item)
+                @if (count($item->blogs) > 0)
+                <button wire:click="selectCategory({{ $item->id }}, 'posts')"
+                    class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
+                    :class="{
+                                        'bg-blue-100 text-blue-600': $wire.selectedCategoryPosts == {{ $item->id }},
+                                        'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryPosts != {{ $item->id }}
+                                    }">
+                    {{ $item->title }}
+                </button>
+                @endif
+                @endforeach
+                <a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
+                    href="{{ isset($selectedRoutePosts) ? $selectedRoutePosts : route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate>مشاهده
+                    همه</a>
+            </div>
+
+            <div
+                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
+                @if($selectedCategoryPosts)
+                @foreach($this->getCategoryItems($selectedCategoryPosts, 'posts') as $blog)
+                <div
+                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
+                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                        class="relative w-[80px] md:w-full">
+                        <div x-data="{
+                                        loaded: false,
+                                        init() {
+                                            const observer = new IntersectionObserver((entries) => {
+                                                entries.forEach(entry => {
+                                                    if (entry.isIntersecting && !this.loaded) {
+                                                        const img = new Image();
+                                                        img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
+                                                        img.onload = () => {
+                                                            this.loaded = true;
+                                                            observer.unobserve(this.$el);
+                                                        };
+                                                    }
+                                                });
+                                            }, {
+                                                rootMargin: '200px'
+                                            });
+                                            observer.observe(this.$el);
+                                        }
+                                    }"
+                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
+                            <img x-cloak x-show="loaded"
+                                x-transition:enter="transition ease-out duration-300"
+                                x-transition:enter-start="opacity-0"
+                                x-transition:enter-end="opacity-100"
+                                :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
+                                alt="{{ $blog->subject }}"
+                                class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
+                                loading="lazy">
+                        </div>
+                    </a>
+                    <div
+                        class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
+                        <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                            {!! $blog->subject !!}
+                        </a>
+                        <div class="md:block hidden text-[#16205b]">
+                            @php
+                            $preview = Str::limit($blog->preview, 80, '...');
+                            @endphp
+                            {!! $preview !!}
+                        </div>
+                        <div class="flex gap-1 text-white md:mt-auto">
+                            <div class="hidden md:flex flex-col justify-center">
+                                <img class="bg-cover bg-center rounded-full size-8"
+                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
+                            </div>
+                            <div class="flex items-center justify-between w-full flex-wrap">
+                                <div class="flex items-center gap-1">
+                                    <div class="text-xs text-gray-600  flex-col justify-center hidden md:flex">
+                                        {{ $blog->user->full_name }}
+                                    </div>
+                                    <span style="font-variation-settings: 'wght' 500;"
+                                        class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
+                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
+                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                                    </div>
+                                </div>
+                                <div class="text-xs text-gray-600 hidden md:flex items-center gap-1">
+                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
+                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
+                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
+                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
+                                    </svg>
+                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                @endforeach
+                @else
+                @foreach ($lastNewsPosts as $blog)
+                <div
+                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
+                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                        class="relative w-[80px] md:w-full">
+                        <div x-data="{
+                                        loaded: false,
+                                        init() {
+                                            const observer = new IntersectionObserver((entries) => {
+                                                entries.forEach(entry => {
+                                                    if (entry.isIntersecting && !this.loaded) {
+                                                        const img = new Image();
+                                                        img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
+                                                        img.onload = () => {
+                                                            this.loaded = true;
+                                                            observer.unobserve(this.$el);
+                                                        };
+                                                    }
+                                                });
+                                            }, {
+                                                rootMargin: '200px'
+                                            });
+                                            observer.observe(this.$el);
+                                        }
+                                    }"
+                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
+                            <img x-cloak x-show="loaded"
+                                x-transition:enter="transition ease-out duration-300"
+                                x-transition:enter-start="opacity-0"
+                                x-transition:enter-end="opacity-100"
+                                :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
+                                alt="{{ $blog->subject }}"
+                                class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
+                                loading="lazy">
+                        </div>
+                    </a>
+                    <div
+                        class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
+                        <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                            {!! $blog->subject !!}
+                        </a>
+                        <div class="md:block hidden text-[#16205b]">
+                            @php
+                            $preview = Str::limit($blog->preview, 80, '...');
+                            @endphp
+                            {!! $preview !!}
+                        </div>
+                        <div class="flex gap-1 text-white md:mt-auto">
+                            <div class="hidden md:flex flex-col justify-center">
+                                <img class="bg-cover bg-center rounded-full size-8"
+                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
+                            </div>
+                            <div class="flex items-center justify-between w-full flex-wrap">
+                                <div class="flex items-center gap-1">
+                                    <div class="text-xs text-gray-600  flex-col justify-center hidden md:flex">
+                                        {{ $blog->user->full_name }}
+                                    </div>
+                                    <span style="font-variation-settings: 'wght' 500;"
+                                        class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
+                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
+                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                                    </div>
+                                </div>
+                                <div class="text-xs text-gray-600 flex items-center gap-1">
+                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
+                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
+                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
+                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
+                                    </svg>
+                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                @endforeach
+                @endif
+            </div>
+
+            <div class="md:hidden block">
+                @if ($selectedCategoryPosts)
+                @foreach ($categories as $item)
+                @if (count($item->blogs()->where('status', 1)->get()) > 0 && $selectedCategoryPosts == $item->id)
+                <a href="{{ route('CategoryBlog.index', ['slug' => $item->slug]) . '/' }}" wire:navigate
+                    class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
+                    مشاهده مطالب بیشتر </a>
+                @endif
+                @endforeach
+                @else
+                <a href="{{ route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate
+                    class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
+                    مشاهده مطالب بیشتر </a>
+                @endif
+            </div>
+        </div>
+        <div class="w-full">
+            <div class="mb-4 border-b  align-items-center justify-between flex ">
+                <h2 class="inline-block text-[18px]  pb-2 border-b-2 rounded-t-lg  text-[#0075e7] border-[#0075e7] ">
+                    اخبار</h2>
+                {{-- <div class="md:block hidden">--}}
+                {{-- @if ($selectedCategoryNews)--}}
+                {{-- @foreach ($categorieNews as $item)--}}
+                {{-- @if (!is_null($item->parent_id) && $selectedCategoryNews == $item->id)--}}
+                {{-- <a class="text-[#16205b]   rounded-xl px-2 text-[16px]"--}}
+                {{-- href=" {{ route('NewsCategory.show', ['slug' => $item->slug]) . '/' }}"--}}
+                {{-- wire:navigate>مشاهده همه</a>--}}
+                {{-- @endif--}}
+                {{-- @endforeach--}}
+                {{-- @else--}}
+                {{-- <a class="text-[#16205b]   rounded-xl px-2 text-[16px]"--}}
+                {{-- href=" {{ route('NewsCategory.index') . '/' }}" wire:navigate>مشاهده همه</a>--}}
+                {{-- @endif--}}
+                {{-- </div>--}}
+            </div>
+            <div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
+                <button wire:click="resetCategory('news')"
+                    class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
+                    :class="{
+                                'bg-blue-100 text-blue-600': !$wire.selectedCategoryNews,
+                                'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryNews
+                            }">
+                    آخرین اخبار
+                </button>
+
+                @foreach ($categorieNews->sortByDesc('priority') as $item)
+                @if (!is_null($item->parent_id))
+                @php
+                $parent = App\Models\Category::where('id', $item->parent_id)->first();
+                @endphp
+                <button wire:click="selectCategory({{ $item->id }}, 'news')"
+                    class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
+                    :class="{
+                                        'bg-blue-100 text-blue-600': $wire.selectedCategoryNews == {{ $item->id }},
+                                        'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryNews != {{ $item->id }}
+                                    }">
+                    {{ $parent->title }} {{ $item->title }}
+                </button>
+                @endif
+                @endforeach
+                <a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
+                    href="{{ isset($selectedRouteNews) ? $selectedRouteNews : route('CategoryBlog.index', ['slug' => 'news']) . '/' }}" wire:navigate>مشاهده
+                    همه</a>
+            </div>
+
+            <div
+                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
+                @if($selectedCategoryNews)
+                @foreach($this->getCategoryItems($selectedCategoryNews, 'news') as $blog)
+                <div
+                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
+                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                        class="relative w-[80px] md:w-full">
+                        <div x-data="{
+                                        loaded: false,
+                                        init() {
+                                            const observer = new IntersectionObserver((entries) => {
+                                                entries.forEach(entry => {
+                                                    if (entry.isIntersecting && !this.loaded) {
+                                                        const img = new Image();
+                                                        img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
+                                                        img.onload = () => {
+                                                            this.loaded = true;
+                                                            observer.unobserve(this.$el);
+                                                        };
+                                                    }
+                                                });
+                                            }, {
+                                                rootMargin: '200px'
+                                            });
+                                            observer.observe(this.$el);
+                                        }
+                                    }"
+                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
+                            <img x-cloak x-show="loaded"
+                                x-transition:enter="transition ease-out duration-300"
+                                x-transition:enter-start="opacity-0"
+                                x-transition:enter-end="opacity-100"
+                                :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
+                                alt="{{ $blog->subject }}"
+                                class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
+                                loading="lazy">
+                        </div>
+                    </a>
+                    <div
+                        class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
+                        <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                            {!! $blog->subject !!}
+                        </a>
+                        <div class="md:block hidden text-[#16205b]">
+                            @php
+                            $preview = Str::limit($blog->preview, 80, '...');
+                            @endphp
+                            {!! $preview !!}
+                        </div>
+                        <div class="flex gap-1 text-white md:mt-auto">
+                            <div class="hidden md:flex flex-col justify-center">
+                                <img class="bg-cover bg-center rounded-full size-8"
+                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
+                            </div>
+                            <div class="flex items-center justify-between w-full flex-wrap">
+                                <div class="flex items-center gap-1">
+                                    <div class="text-xs text-gray-600  flex-col justify-center hidden md:flex">
+                                        {{ $blog->user->full_name }}
+                                    </div>
+                                    <span style="font-variation-settings: 'wght' 500;"
+                                        class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
+                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
+                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                                    </div>
+                                </div>
+                                <div class="text-xs text-gray-600 flex items-center gap-1">
+                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
+                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
+                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
+                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
+                                    </svg>
+                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                @endforeach
+                @else
+                @foreach ($lastNewsArticles as $blog)
+                <div
+                    class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
+                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                        class="relative w-[80px] md:w-full">
+                        <div x-data="{
+                                        loaded: false,
+                                        init() {
+                                            const observer = new IntersectionObserver((entries) => {
+                                                entries.forEach(entry => {
+                                                    if (entry.isIntersecting && !this.loaded) {
+                                                        const img = new Image();
+                                                        img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
+                                                        img.onload = () => {
+                                                            this.loaded = true;
+                                                            observer.unobserve(this.$el);
+                                                        };
+                                                    }
+                                                });
+                                            }, {
+                                                rootMargin: '200px'
+                                            });
+                                            observer.observe(this.$el);
+                                        }
+                                    }"
+                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
+                            <img x-cloak x-show="loaded"
+                                x-transition:enter="transition ease-out duration-300"
+                                x-transition:enter-start="opacity-0"
+                                x-transition:enter-end="opacity-100"
+                                :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
+                                alt="{{ $blog->subject }}"
+                                class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
+                                loading="lazy">
+                        </div>
+                    </a>
+                    <div
+                        class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
+                        <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
+                            class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                            {!! $blog->subject !!}
+                        </a>
+                        <div class="md:block hidden text-[#16205b]">
+                            @php
+                            $preview = Str::limit($blog->preview, 80, '...');
+                            @endphp
+                            {!! $preview !!}
+                        </div>
+                        <div class="flex gap-1 text-white md:mt-auto">
+                            <div class="hidden md:flex flex-col justify-center">
+                                <img class="bg-cover bg-center rounded-full size-8"
+                                    src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
+                            </div>
+                            <div class="flex items-center justify-between w-full flex-wrap">
+                                <div class="flex items-center gap-1">
+                                    <div class="text-xs text-gray-600  flex-col justify-center hidden md:flex">
+                                        {{ $blog->user->full_name }}
+                                    </div>
+                                    <span style="font-variation-settings: 'wght' 500;"
+                                        class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
+                                    <div class="text-xs text-gray-600 flex flex-col justify-center">
+                                        {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                                    </div>
+                                </div>
+                                <div class="text-xs text-gray-600 flex items-center gap-1">
+                                    <svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
+                                        <path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
+                                        <path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
+                                        <path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
+                                    </svg>
+                                    <span class="text-nowrap text-xs text-gray-600 mt-[2px]" lang="fa">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                @endforeach
+                @endif
+            </div>
+
+
+            <div class="md:hidden block">
+                @if ($selectedCategoryNews)
+                @foreach ($categorieNews as $item)
+                @if (!is_null($item->parent_id) && $selectedCategoryNews == $item->id)
+                <a href="{{ cleanRouteUrl('NewsCategory.show', ['slug' => $item->slug]) . '/' }}"
+                    wire:navigate
+                    class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
+                    مشاهده اخبار بیشتر </a>
+                @endif
+                @endforeach
+                @else
+                <a href="{{ cleanRouteUrl('NewsCategory.index') . '/' }}" wire:navigate
+                    class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
+                    مشاهده اخبار بیشتر </a>
+                @endif
+            </div>
+
+        </div>
+
+
+    </div>
+
+</div>

resources/views/livewire/home/_comment.blade.php

@@ -0,0 +1,104 @@
+ @php
+ $comments = App\Models\Comment::find($comments['id']);
+ $counter = count($comments->other) ;
+ @endphp
+ @foreach ($comments->other as $other_comment)
+ <div class=" relative">
+     <div>
+         @if ($other_comment->status == 1)
+         <div>
+             <div class="flex flex-col gap-3 my-3 @if( $counter > 1) border-b @endif">
+                 <div x-data="{ reply_id: 0 }">
+                     <div class="relative rounded-xl  mr-10 flex gap-4">
+                         <div class="flex  w-[64px]">
+                             <img wire:ignore alt="" class="  rounded-full w-[50px] h-[50px] md:w-[60px] md:h-[60px]" src="{{ asset('image/profile/'.$other_comment->image_url)  }}">
+                         </div>
+                         <div class="flex flex-col gap-5 w-full">
+                             <div class="flex items-center justify-between gap-1">
+                                 <span class="text_class  font-bold text-[14px] text-[#6a7196]"> {{Str::limit($other_comment->name, 25, '...')   }} </span>
+                                 <span class="  text_class font-bold text-[14px] text-[#6a7196]   ">
+                                     {{ how_long($other_comment->created_at) }}</span>
+                             </div>
+                             <p class="text-[#6a7196]  text-[14px]">{{ $other_comment->message }}</p>
+                             <div class="flex gap-10">
+                                 <div class="flex flex-col justify-end">
+                                     <button type="button" @click="reply_id = {{ $other_comment->id }}">
+                                         <div class="flex gap-1 items-center content-center">
+                                             <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.000000 16.000000" preserveAspectRatio="xMidYMid meet">
+                                                 <g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)" fill="#4f5053" stroke="none">
+                                                     <path d="M131 123 c-2 -29 -27 -53 -56 -53 -18 0 -23 4 -18 16 8 21 -16 14 -31 -8 -7 -12 -6 -21 3 -32 17 -20 32 -21 25 -1 -5 12 2 15 29 15 42 0 60 19 54 57 -3 21 -4 22 -6 6z" />
+                                                 </g>
+                                             </svg>
+                                             <span class=" text-[14px] text-[#a0a4bc]">پاسخ</span>
+                                         </div>
+                                     </button>
+                                 </div>
+                             </div>
+                         </div>
+                     </div>
+                     <div x-cloak @click.outside="reply_id = 0" x-show="reply_id == {{ $other_comment->id }}" class="mt-5">
+                         <form x-data="{ name_reply:'', message_reply:'' , timeout:null ,  errors: {},selected: null,
+                                imageName: '',
+                                        submit(){
+                                         if(this.timeout) {
+                                                                return;
+                                                            }
+                                    if (this.imageName == '') {
+                                        this.errors.imageName = 'انتخاب تصویر الزامی است.';
+                                    }
+                                            if(this.message_reply == ''){
+                                                this.errors.message_reply = 'متن نمی‌تواند خالی باشد.' ;
+                                            }
+                                            if( Object.keys(this.errors).length == 0){
+                                                                                    $wire.set('image_url' , this.imageName );
+
+                                                $wire.reply({{ $comment->id }},{{ $comment->id }});
+                                            }else{
+                                                this.timeout = setTimeout(() => {
+                                                        this.errors = {};
+                                                        this.timeout = null;
+                                                    }, 3000);
+                                            }
+                                        }}">
+                             <div class=" border border-black flex flex-col   p-3 rounded-xl">
+                                 <input :class="errors.name_reply ? 'border-red-500' : 'border-gray-400'" style="  box-shadow: none;" x-model="name_reply" wire:model="comment_name_reply" class="bg-transparent     focus:border-1  border focus:border-black focus:ring-1  my-3 p-3 resize-none placeholder-gray-600  rounded-2xl text-black" placeholder="نام شما">
+                                 <textarea :class="errors.message_reply ? 'border-red-500' : 'border-gray-400'" style="  box-shadow: none;" x-model="message_reply" wire:model="comment_message_reply" class="bg-transparent     focus:border-1   focus:border-black focus:ring-1  my-3 p-3 resize-none placeholder-gray-600  rounded-2xl pt-4 text-black" placeholder="نظر خود را بنویسید "></textarea>
+                                 <div class="flex justify-between  flex-col md:flex-row   mt-3">
+                                     <div id="selected_image" class="flex items-center gap-2   ">
+                                         <template x-for="(src, index) in ['image/profile/1.png', 'image/profile/2.png', 'image/profile/3.png', 'image/profile/4.png', 'image/profile/5.png', 'image/profile/6.png']" :key="index">
+                                             <img :src="src" :class="selected === index ? 'border-green-500' : 'border-gray-200'"
+                                                 class="w-10 h-10 border-2 rounded-full"
+                                                 @click="selected = index; imageName = src.split('/').pop()">
+                                         </template>
+                                         <span :class="errors.imageName ? 'block' : ' hidden'" x-text="errors.imageName" class="text-red-500 text-sm"></span>
+                                     </div>
+                                     <div class="flex items-center mt-4 md:mt-0  justify-end  gap-3">
+                                         <button @click="reply_id = 0" type="button" class="text-black p-2 px-4 w-max text-sm rounded">لغو پاسخ</button>
+                                         <button @click="submit" type="button" class="bg-ahrom p-2   text-white text-sm px-4 w-max rounded-xl">
+                                             <div wire:loading wire:target="comment" class="  top-5 left-10">
+                                                 <div role="status">
+                                                     <svg aria-hidden="true" class="w-5 h-5 text-gray-200 animate-spin fill-green-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                         <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
+                                                         <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
+                                                     </svg>
+                                                     <span class="sr-only">Loading...</span>
+                                                 </div>
+                                             </div>
+                                             <span wire:loading.remove wire:target="comment">ارسال نظر</span>
+                                         </button>
+                                     </div>
+                                 </div>
+                             </div>
+                         </form>
+                     </div>
+                 </div>
+             </div>
+         </div>
+         @endif
+     </div>
+
+     <div>
+         @include('livewire.home._comment', ['comments' => $other_comment, 'comment' => $comment, 'blog_id' => $blog_id])
+     </div>
+ </div>
+ @endforeach

resources/views/livewire/home/_commentc.blade.php

@@ -0,0 +1,112 @@
+ @php
+ $comments = App\Models\Comment::where('id' , $comments['id'])->first() ;
+ @endphp
+ @if (!is_null( $comments))
+ @foreach ($comments->other as $other_comment)
+ <div style="margin-right: 40px" class="mr-10 relative">
+     <div>
+         @if ($other_comment->status == 1)
+         <div>
+             <div class="flex flex-col gap-3 m-3">
+                 <div x-data="{ reply_id: 0 }">
+                     <div class="relative rounded-xl p-5 flex gap-4">
+                         <div class="flex">
+                             <img wire:ignore alt="" class="  rounded-full  w-[60px] h-[60px]" src="{{ asset('image/profile/'.$other_comment->image_url)  }}">
+                         </div>
+                         <div class="flex flex-col gap-5">
+                             <div class="flex gap-1">
+                                 <span class="text_class  text-[18px] text-[#1f1f20]">{{ $other_comment->name }}</span>
+
+                             </div>
+                             <p class="text-black">{{ $other_comment->message }}</p>
+                             <div class="flex gap-10">
+                                 <div class="flex flex-col justify-end">
+                                     <button type="button" @click="reply_id = {{ $other_comment->id }}">
+                                         <div class="flex gap-1 items-center content-center">
+                                             <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.000000 16.000000" preserveAspectRatio="xMidYMid meet">
+                                                 <g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)" fill="#4f5053" stroke="none">
+                                                     <path d="M131 123 c-2 -29 -27 -53 -56 -53 -18 0 -23 4 -18 16 8 21 -16 14 -31 -8 -7 -12 -6 -21 3 -32 17 -20 32 -21 25 -1 -5 12 2 15 29 15 42 0 60 19 54 57 -3 21 -4 22 -6 6z" />
+                                                 </g>
+                                             </svg>
+                                             <span class="text-xs text-[#1f1f20]">پاسخ</span>
+                                         </div>
+                                     </button>
+
+                                 </div>
+
+                             </div>
+                         </div>
+                         <div class=" flex text-end ms-auto">
+                             <span class="  text_class  text-[18px] text-black   ">
+                                 {{ how_long($other_comment->created_at) }}</span>
+                         </div>
+                     </div>
+                     <div x-cloak @click.outside="reply_id = 0" x-show="reply_id == {{ $other_comment->id }}" class="mt-5">
+                         <form x-data="{ name_reply:'', message_reply:'' , timeout:null ,  errors: {},selected: null,
+                                    imageName: '',
+                                            submit(){
+                                            if(this.timeout) {
+                                                                    return;
+                                                                }
+                                        if (this.imageName == '') {
+                                            this.errors.imageName = 'انتخاب تصویر الزامی است.';
+                                        }
+                                                if(this.message_reply == ''){
+                                                    this.errors.message_reply = 'متن نمی‌تواند خالی باشد.' ;
+                                                }
+                                                if( Object.keys(this.errors).length == 0){
+                                                                                        $wire.set('image_url' , this.imageName );
+
+                                                    $wire.reply({{ $comment->id }},{{ $comment->id }});
+                                                }else{
+                                                    this.timeout = setTimeout(() => {
+                                                            this.errors = {};
+                                                            this.timeout = null;
+                                                        }, 3000);
+                                                }
+                                            }}">
+                             <div class=" border border-black flex flex-col h-60 p-3 rounded-xl">
+                                 <input :class="errors.name_reply ? 'border-red-500' : 'border-gray-400'" style="  box-shadow: none;" x-model="name_reply" wire:model="comment_name_reply" class="bg-transparent     focus:border-2  border focus:border-black focus:ring-1  my-3 p-3 resize-none placeholder-gray-600  rounded-2xl text-black" placeholder="نام شما">
+                                 <textarea :class="errors.message_reply ? 'border-red-500' : 'border-gray-400'" style="  box-shadow: none;" x-model="message_reply" wire:model="comment_message_reply" class="bg-transparent     focus:border-2   focus:border-black focus:ring-1  my-3 p-3 resize-none placeholder-gray-600  rounded-2xl text-black" placeholder="نظر خود را بنویسید "></textarea>
+                                 <div class="flex justify-between ">
+                                     <div id="selected_image" class="flex items-center gap-2 justify-evenly ps-3">
+                                         <template x-for="(src, index) in ['image/profile/1.png', 'image/profile/2.png', 'image/profile/3.png', 'image/profile/4.png', 'image/profile/5.png', 'image/profile/6.png']" :key="index">
+                                             <img :src="src" :class="selected === index ? 'border-green-500' : 'border-gray-200'"
+                                                 class="w-10 h-10 border-2 rounded-full"
+                                                 @click="selected = index; imageName = src.split('/').pop()">
+                                         </template>
+                                         <span :class="errors.imageName ? 'block' : ' hidden'" x-text="errors.imageName" class="text-red-500 text-sm"></span>
+                                     </div>
+                                     <div class="flex items-center gap-3">
+                                         <button @click="reply_id = 0" type="button" class="text-white p-2 px-4 w-max text-sm rounded">لغو پاسخ</button>
+                                         <button @click="submit" type="button" class="bg-ahrom p-2   text-white text-sm px-4 w-max rounded-xl">
+                                             <div wire:loading wire:target="comment" class="  top-5 left-10">
+                                                 <div role="status">
+                                                     <svg aria-hidden="true" class="w-5 h-5 text-gray-200 animate-spin fill-green-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                         <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
+                                                         <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
+                                                     </svg>
+                                                     <span class="sr-only">Loading...</span>
+                                                 </div>
+                                             </div>
+                                             <span wire:loading.remove wire:target="comment">ارسال نظر</span>
+                                         </button>
+                                     </div>
+                                 </div>
+                             </div>
+                         </form>
+                     </div>
+                 </div>
+             </div>
+         </div>
+         @endif
+     </div>
+     @if ($other_comment->status == 1)
+     <hr>
+     @endif
+     <div>
+         @include('livewire.home._comment', ['comments' => $other_comment, 'comment' => $comment, 'blog_id' => $blog_id])
+     </div>
+ </div>
+ @endforeach
+ @endif

resources/views/livewire/home/auth/login-page.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- If your happiness depends on money, you will never be happy with yourself. --}}
+</div>

resources/views/livewire/home/dictionary.blade.php

@@ -0,0 +1,24 @@
+@push('style_css')
+<style>
+    .max-w-5xl {
+        max-width: 1600px !important;
+    }
+
+    .max-w-4xl {
+        max-width: 1400px !important;
+    }
+</style>
+
+@endpush
+<div>
+    <div class=" visible relative z-10 mx-auto flex max-w-5xl flex-col   px-4 py-20  lg:flex-col  ">
+        <h2 class="pb-4 border-b mb-4  text-[22px] lg:text-[26px]">
+            فرهنگ لغت {{$dictionary->title}}
+        </h2>
+        <div class="flex flex-nowrap items-center  gap-3">
+            <p>
+                {{$dictionary->subject}}
+            </p>
+        </div>
+    </div>
+</div>

resources/views/livewire/images.blade.php

@@ -0,0 +1,20 @@
+@push('style_css') <style>
+    .max-w-5xl {
+        max-width: 1600px !important;
+    }
+</style> @endpush
+
+<div class="max-w-5xl mx-auto py-20">
+    <div class="grid grid-cols-8 gap-4 ">
+        @foreach ($images as $image)
+        <a x-data="{ loaded: false, init() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && !this.loaded) { const img = new Image(); img.src = '{{ asset('images/' . $image) }}'; img.onload = () => { this.loaded = true; observer.unobserve(this.$el); }; } }); }, { rootMargin: '200px' }); observer.observe(this.$el); } }" href="#" wire:navigate style="height: 230px " class="hover:backdrop-blur cursor-pointer bg-gray-200 col-span-1 border overflow-hidden rounded-xl shadow">
+            <div x-show="!loaded" class="animate-pulse flex items-center justify-center w-full h-full">
+                <div role="status" class="!bg-gray-200 animate-pulse h-full w-full">
+                    <div class="h-full bg-gray-200 rounded-full dark:bg-gray-700 w-full mb-2.5"></div> <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+            <img height="300" x-cloak x-show="loaded" class="bg-cover bg-center border w-full h-[230px] " x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" :src="'{{ asset('images/' . $image) }}'" loading="lazy">
+        </a>
+        @endforeach
+    </div>
+</div>

resources/views/livewire/partials/_nested_index.blade.php

@@ -0,0 +1,56 @@
+{{-- _nested_index.blade.php --}}
+
+@if($category->children->isNotEmpty())
+<div class="mb-1  border-b pb-2 ">
+    <div class="flex items-center justify-between cursor-pointer mb-2     py-1 rounded">
+        <a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate class="   text-sm font-medium gap-1  flex items-center  mt-1  ">
+            @if (!is_null($category->image_url))
+            <img class="w-8 h-8 rounded" src="{{asset('image').'/'.$category->image_url}}" alt="">
+            @endif
+            <span>{{ $category->title }}</span>
+        </a>
+
+
+        <button x-show="loadingNested != {{$category->id}}" type="button" :disabled="loadingFetch" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" @click.prevent=" fetchCategoryBlogs('{{ $category->id }}', '{{ $topLevelCategory->id }}'); showLoadingAnimation('{{ $category->id }}', 'loading-anim-{{ $category->id }}') ">
+            <img class="w-5 h-5" src="{{asset('image/wizard-stick.svg')}}" alt="">
+        </button>
+        <div id="loading-anim-{{$category->id}}" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" x-show="loadingNested == {{$category->id}}">
+        </div>
+    </div>
+
+    <div class="pl-4  flex items-center gap-2 ">
+
+        @foreach($category->children->sortByDesc('priority') as $child)
+        <a href="{{ route('CategoryBlog.index', ['slug' => $child->slug]).'/' }}" wire:navigate class="  text-sm font-medium gap-1  flex items-center bg-gray-100 rounded-lg px-1 py-1 mt-1  ">
+            @if (!is_null($child->image_url))
+            <img class="w-8 h-8 rounded" src="{{asset('image').'/'.$child->image_url}}" alt="">
+            @endif
+            <span>{{ $child->title }}</span>
+        </a>
+        @if($child->children->isNotEmpty())
+        <div class="pl-4    ">
+            @foreach($child->children->sortByDesc('priority') as $grandchild)
+            <a href="{{ route('CategoryBlog.index', ['slug' => $grandchild->slug]) .'/'}}" wire:navigate
+                class="block px-3 py-1  text-sm  rounded mb-1">
+                {{ $grandchild->title }}
+            </a>
+            @endforeach
+        </div>
+        @endif
+        @endforeach
+    </div>
+</div>
+@else
+<div class="  border-b  flex justify-between items-center mb-1 mt-1 py-1 ">
+    <a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate
+        class=" block  text-sm    w-full  ">
+        <span>{{ $category->title }}</span>
+    </a>
+
+    <button x-show="loadingNested != {{$category->id}}" type="button" :disabled="loadingFetch" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" @click.prevent=" fetchCategoryBlogs('{{ $category->id }}', '{{ $topLevelCategory->id }}'); showLoadingAnimation('{{ $category->id }}', 'loading-anim-{{ $category->id }}') ">
+        <img class="w-5 h-5" src="{{asset('image/wizard-stick.svg')}}" alt="">
+    </button>
+    <div id="loading-anim-{{$category->id}}" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" x-show="loadingNested == {{$category->id}}">
+    </div>
+</div>
+@endif

resources/views/livewire/partials/form.blade.php

@@ -0,0 +1,321 @@
+<div>
+    <!-- Consulting -->
+    <div x-data="formCons" class="px-6 py-20 sm:px-8 lg:py-24" id="consulting">
+        <div class="pb-12 text-center">
+            <h2 class="pb-4 text-2xl font-bold text-slate-900 md:text-3xl">
+                درخواست مشاوره
+            </h2>
+            <p class="text-slate-900">
+                اگر برای سرمایه&zwnj;گذاری نیاز به مشاوره دارید کافیست فرم زیر را تکمیل کنید.
+            </p>
+        </div>
+        <div class="mx-auto flex flex-col-reverse lg:grid max-w-5xl grid-cols-12 gap-4 lg:gap-6">
+            <div
+                class="col-span-12 flex flex-col justify-between space-y-16 rounded-2xl bg-gray-100 p-6 shadow sm:col-span-6 sm:space-y-0 lg:col-span-4">
+                <div>
+                    <h3 class="pb-2 text-2xl font-semibold text-slate-800">
+                        اطلاعات تماس
+                    </h3>
+                    <p class="text-slate-900">
+                        از روش&zwnj;های زیر می&zwnj;توانید با ما در ارتباط باشید.
+                    </p>
+                    <p class="text-slate-900 mt-2">
+                        همه روزه از ساعت ۹ الی ۱۷ پاسخگوی شما هستیم.
+                    </p>
+                </div>
+                <div class="space-y-4 font-sans">
+                    <div class="flex items-center gap-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
+                            <rect x="5" y="2" width="14" height="20" rx="2" ry="2">
+                            </rect>
+                            <line x1="12" y1="18" x2="12.01" y2="18"></line>
+                        </svg>
+                        <a href="tel:02191558184">
+                            <span class="rtl inline-block align-middle font-vazir-vf text-slate-900">
+                                ۰۲۱-۹۱۵۵۸۱۸۴
+                            </span>
+                        </a>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
+                            <circle cx="12" cy="12" r="4"></circle>
+                            <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
+                        </svg>
+                        <a href="mailto:info@ahrominvest.net">
+                            <span class="inline-block align-middle font-vazir-vf text-slate-900">
+                                info@ahrominvest.ir
+                            </span>
+                        </a>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
+                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+                                <circle cx="12" cy="10" r="3"></circle>
+                            </svg>
+
+                        </div>
+                        <span class="rtl inline-block align-middle font-vazir-vf text-slate-900">
+                            البرز، کرج، بلوار بلال، ساختمان پارسیان، طبقه ۴، واحد ۲۲
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div id="consultationForm"
+                class="mt-4 lg:mt-0 col-span-12 grid grid-cols-12 gap-4 sm:col-span-6 lg:col-span-8">
+                <input type="hidden" name="_token" value="ZnRTSHIl27iRnnZvNyonWa1QaZQ4xlfrxLPmhhis"> <input
+                    type="hidden" id="FTF_input" name="FTF" value="1">
+                <div class="col-span-12">
+                    <label for="full_name"
+                        class="block pb-2 text-sm font-medium text-slate-900 after:text-red-600 after:content-['*']">
+                        نام و نام خانوادگی
+                    </label>
+                    <input wire:model="full_name" x-ref="full_name" id="full_name" type="text" name="full_name"
+                        class="block w-full rounded-xl border border-slate-300 bg-white p-3 text-sm placeholder-slate-400 shadow-sm focus:border-ahrom focus:outline-none focus:ring-1 focus:ring-ahrom"
+                        placeholder="نام و نام خانوادگی خود را وارد کنید.">
+                </div>
+                <div class="col-span-12">
+                    <label for="phone_number"
+                        class="block pb-2 text-sm font-medium text-slate-900 after:text-red-600 after:content-['*']">
+                        شماره تماس
+                    </label>
+                    <input wire:model="phone_number" dir="rtl" x-ref="phone_number" id="phone_number"
+                        type="tel" name="phone_number"
+                        class="block w-full rounded-xl border border-slate-300 bg-white p-3 text-sm placeholder-slate-400 shadow-sm focus:border-ahrom focus:outline-none focus:ring-1 focus:ring-ahrom"
+                        placeholder="شماره تماس خود را وارد کنید. "
+                        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
+                        min="1" maxlength="11">
+                </div>
+                <div class="col-span-12">
+                    <label for="description"
+                        class="block pb-2 text-sm font-medium text-slate-900 after:text-red-600 after:content-['*']">متن
+                        پیام
+                    </label>
+                    <textarea wire:model="description" x-ref="description" id="description" style="resize: none" name="description"
+                        placeholder="توضیحات خود را وارد کنید."
+                        class="block min-h-[10rem] w-full rounded-xl border border-slate-300 bg-white p-3 text-sm placeholder-slate-400 shadow-sm focus:border-ahrom focus:outline-none focus:ring-1 focus:ring-ahrom"></textarea>
+                </div>
+                <div id="errorCheck" class="text-red-400 p-4 h-7  invisible">
+                    خطایی پیش آمده
+                </div>
+                <div class="col-span-12">
+                    <button @click="checkFormRequest()" id="confirm_opt_button" type="button"
+                        class="btn w-full bg-ahrom text-white hover:bg-opacity-90 flex justify-center items-center">ارسال</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+    <div class="  lg:block hidden relative mx-auto max-w-5xl px-8 lg:px-0 pt-12 pb-24  bg-white">
+        <div id="advertise_section" class="px-8">
+            <div class="absolute z-10 left-5 bottom-10">
+                <img class="w-96" src="https://ahrominvest.ir/page/advertise-2.png" alt="">
+            </div>
+            <div class="border rounded-xl border-slate-300 w-full h-full ps-16 pe-10 flex justify-between">
+                <div class="py-10 flex space-x-reverse space-x-12">
+                    <div class="border rounded-xl border-slate-300 pt-2 pb-1 px-2 space-y-1">
+                        <div>
+                            <img src="https://ahrominvest.ir/page/qr.svg" class="w-28 h-28" alt=""
+                                srcset="">
+                        </div>
+                        <div>
+                            <p class="text-xs font-black flex justify-center">برای دانلود اسکن کنید!</p>
+                        </div>
+                    </div>
+                    <div class="flex flex-col justify-between">
+                        <div>
+                            <p class="text-xl font-extrabold">سرمایه&zwnj;گذاری اهرم</p>
+                            <p class="text-lg font-medium">سریع و مطمئن سرمایه&zwnj;گذاری کنید.</p>
+                        </div>
+
+                        <a href="#" class="flex space-x-1 space-x-reverse">
+                            <div>
+                                <p class="text-blue-500 text-lg">مشاهده لینک&zwnj;های دانلود</p>
+                            </div>
+                            <div class="flex items-center justify-center mt-1.5">
+                                <svg class="w-5 h-5 fill-blue-500" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 576 512" style="rotate: 90deg">
+                                    <path
+                                        d="M241 337c-9.4 9.4-24.6 9.4-33.9 0L47 177c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143L367 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L241 337z">
+                                    </path>
+                                </svg>
+                            </div>
+                        </a>
+
+                        <div class="flex space-x-2 space-x-reverse">
+                            <div class="flex space-x-1 space-x-reverse">
+                                <div>
+                                    <svg class="w-4 h-4 fill-slate-300" xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 22.773 22.773">
+                                        <g xmlns="http://www.w3.org/2000/svg">
+                                            <g>
+                                                <path
+                                                    d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573    c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z">
+                                                </path>
+                                                <path
+                                                    d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334    c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0    c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019    c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464    c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648    c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z">
+                                                </path>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                            <g>
+                                            </g>
+                                        </g>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <svg class="w-5 h-5 fill-slate-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                                        <path
+                                            d="M32 25.333h-32c0.318-2.896 1.328-5.672 2.948-8.094 1.245-1.922 2.911-3.531 4.88-4.708l0.547-0.302-2.693-4.547c-0.198-0.323-0.094-0.74 0.224-0.938 0.318-0.188 0.734-0.083 0.922 0.24l2.771 4.667c2.052-0.818 4.245-1.224 6.453-1.198 2.172-0.026 4.323 0.38 6.333 1.198l2.76-4.667c0.193-0.323 0.615-0.427 0.932-0.224 0.318 0.198 0.411 0.615 0.214 0.932l-2.693 4.562 0.667 0.37c1.958 1.224 3.615 2.87 4.839 4.828 1.531 2.385 2.521 5.073 2.896 7.88zM22 19.359c0 0.74 0.599 1.333 1.333 1.333s1.333-0.594 1.333-1.333c0-0.734-0.599-1.333-1.333-1.333s-1.333 0.599-1.333 1.333zM7.333 19.359c0 0.74 0.599 1.333 1.333 1.333s1.333-0.594 1.333-1.333c0-0.734-0.599-1.333-1.333-1.333s-1.333 0.599-1.333 1.333z">
+                                        </path>"
+                                    </svg>
+                                </div>
+                            </div>
+                            <p class=" text-slate-400 text-xs flex items-end">قابلیت نصب روی Android و IOS</p>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <section id="recommend_download_app_section"
+        class="fixed bottom-0 z-50 w-full bg-ahrom hidden rounded-t-xl items-center px-4">
+        <div class="flex justify-between w-full py-2">
+            <a href="#" class="flex space-x-2 space-x-reverse">
+                <div>
+                    <svg class="w-10 h-10 fill-white" xmlns="http://www.w3.org/2000/svg" version="1.0"
+                        viewBox="0 0 720.000000 720.000000" preserveAspectRatio="xMidYMid meet">
+                        <g transform="translate(0.000000,720.000000) scale(0.100000,-0.100000)" stroke="none">
+                            <path
+                                d="M2790 7139 c-162 -8 -424 -38 -605 -69 -370 -63 -685 -166 -950 -311 -524 -285 -894 -805 -1060 -1489 -42 -174 -87 -508 -116 -865 -17 -206 -23 -1114 -10 -1390 21 -425 72 -851 130 -1090 136 -554 429 -1028 816 -1320 414 -311 1056 -496 1860 -535 271 -13 1209 -13 1480 0 858 41 1511 242 1934 595 378 315 652 805 766 1370 45 223 87 595 105 930 13 241 13 1043 0 1280 -20 368 -66 757 -115 982 -151 687 -529 1232 -1054 1525 -395 219 -950 354 -1596 388 -216 11 -1365 11 -1585 -1z m1023 -3701 l-1448 -1448 -405 0 -405 0 1850 1850 1850 1850 3 -402 2 -403 -1447 -1447z m965 -949 c271 -272 489 -498 486 -502 -10 -9 -1994 -9 -1994 0 0 14 995 1003 1005 1001 6 -2 232 -226 503 -499z">
+                            </path>
+                        </g>
+                    </svg>
+                </div>
+                <div class="flex items-center">
+                    <p class="text-white font-extrabold">دانلود اپلیکیشن سرمایه&zwnj;گذاری اهرم</p>
+                </div>
+            </a>
+            <div id="recommend_download_app_close_btn" class="flex items-center justify-center">
+                <svg class="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                    <path
+                        d="M378.4 71.4c8.5-10.1 7.2-25.3-2.9-33.8s-25.3-7.2-33.8 2.9L192 218.7 42.4 40.6C33.9 30.4 18.7 29.1 8.6 37.6S-2.9 61.3 5.6 71.4L160.7 256 5.6 440.6c-8.5 10.2-7.2 25.3 2.9 33.8s25.3 7.2 33.8-2.9L192 293.3 341.6 471.4c8.5 10.1 23.7 11.5 33.8 2.9s11.5-23.7 2.9-33.8L223.3 256l155-184.6z">
+                    </path>
+                </svg>
+            </div>
+        </div>
+    </section>
+
+</div>
+@script
+<script>
+    Alpine.data('formCons', () => ({
+        status: false,
+        status1: false,
+        status2: false,
+
+        init() {
+            this.$wire.on('ticket_ok', () => {
+                let confirmOtpBtn = document.getElementById('confirm_opt_button');
+                confirmOtpBtn.innerHTML = 'ارسال';
+                confirmOtpBtn.setAttribute('disabled', false);
+                alert(this.$wire.textSuccess);
+            });
+        },
+
+        checkFormRequest() {
+            if (this.$refs.full_name.value.length <= 0) {
+                this.$refs.full_name.classList.add('border', 'border-red-500');
+                setTimeout(() => {
+                    this.$refs.full_name.classList.remove('border', 'border-red-500');
+                }, 2000);
+            } else {
+                this.status = true;
+            }
+
+            if (this.$refs.phone_number.value.length <= 0) {
+                this.$refs.phone_number.classList.add('border', 'border-red-500');
+                setTimeout(() => {
+                    this.$refs.phone_number.classList.remove('border', 'border-red-500');
+                }, 2000);
+            } else {
+                this.status1 = true;
+            }
+
+            if (this.$refs.description.value.length <= 0) {
+                this.$refs.description.classList.add('border', 'border-red-500');
+                setTimeout(() => {
+                    this.$refs.description.classList.remove('border', 'border-red-500');
+                }, 2000);
+            } else {
+                this.status2 = true;
+            }
+
+
+
+            if (this.status == true && this.status1 == true && this.status2 == true) {
+                let confirmOtpBtn = document.getElementById('confirm_opt_button');
+                confirmOtpBtn.innerHTML =
+                    '<div class="spinner h-6 w-6 animate-spin rounded-full border-[3px] border-white border-r-transparent dark:border-navy-300 dark:border-r-transparent"></div>';
+                confirmOtpBtn.setAttribute('disabled', true);
+                this.$wire.counselingRequest().then((er) => {
+                    let confirmOtpBtn = document.getElementById('confirm_opt_button');
+                    confirmOtpBtn.innerHTML = 'ارسال';
+                    confirmOtpBtn.setAttribute('disabled', false);
+                    if (er.status === 'error') {
+                        var errorCheck = document.getElementById('errorCheck');
+                        errorCheck.innerHTML = er.message;
+                        errorCheck.classList.remove('invisible');
+                        errorCheck.classList.add('text-red-500');
+
+                        setTimeout(() => {
+                            errorCheck.classList.remove('text-red-500');
+                            errorCheck.classList.add('invisible');
+                            errorCheck.innerHTML = '';
+                        }, 2000);
+
+                        confirmOtpBtn.innerHTML = 'ارسال';
+                        confirmOtpBtn.removeAttribute('disabled');
+                        confirmOtpBtn.setAttribute('disabled', false);
+
+                    }
+                });
+            }
+        },
+
+    }));
+</script>
+@endscript

resources/views/livewire/partials/header.blade.php

@@ -0,0 +1,656 @@
+@push('style_css')
+<style>
+    .widthSearch {
+        width: 50px;
+        transition: all .3s ease;
+    }
+
+    .activSearch {
+        width: 100% !important;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    .fixed.inset-0 {
+        animation: fadeIn 0.3s ease-out;
+    }
+
+    .max-h-[80vh]::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .max-h-[80vh]::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 4px;
+    }
+
+    .max-h-[80vh]::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 4px;
+    }
+
+    .max-h-[80vh]::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+
+</style>
+@endpush
+
+<div x-data="headerPartials">
+
+    <header id="main_header" @keydown.window.escape=" showbackdrop = false , searchbar = false  " @keydown.window.slash="  showbackdrop = true , searchbar = true , openinput()  " @mouseleave="newsList = false , blogsList = false " class="z-[3000] w-full border-b   translate-y-0   border-slate-200 bg-white     px-6   sm:px-6 fixed   h-[80px]  lg:fixed top-0  ">
+        <!-- Desktop Navigation -->
+        <div class="max-w-5xl mx-auto justify-center h-full ">
+            <div x-cloak x-show="searchbar == false" class="flex items-center justify-between  h-full  w-full">
+
+                <a @mouseenter="newsList = false , blogsList = false" href="{{ route('index').'/' }}" wire:navigate class="  lg:me-0 pe-5 select-none sm:flex sm:gap-4 sm:items-center z-20">
+                    <img style="width:50px;" src="{{  env('APP_URL_IMAGE').'images/static/logo.png'  }}" alt="مجله خبری سرمایه گذاری اهرم ">
+                    <span class="h-[30px] w-[2px] bg-gray-300 "></span>
+                </a>
+
+                <div @mouseenter="newsList = false , blogsList = false" class=" md:hidden flex items-center space-x-2 space-x-reverse" style="align-items: center">
+                    <button id="buttonsideM" @click="  searchbar = true , showbackdrop = true   ,  openinput() " class="bg-gray-100  flex h-10 items-center justify-center pb-1 px-2 rounded-full  w-10 z-20" type="button ">
+                        <svg height="20px" width="20px" class="cursor-pointer  mt-1 fill-[#61676e] " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" />
+                        </svg>
+                    </button>
+
+                    <button @click="btntogglesidebar = !btntogglesidebar , btntogglesidebar == true ? document.getElementById('bodyStyle').classList.add('overflow-hidden') :  document.getElementById('bodyStyle').classList.remove('overflow-hidden')  , btntogglesidebar == true ? console.log('') : (document.getElementById('sideCategoryMobile').classList.add('translate-x-full') , document.getElementById('sideCategoryNotBlogMobile').classList.add('translate-x-full'))  " type="button" :class="btntogglesidebar == true ? 'pe-[.4rem]' : 'pb-1 px-2'" class="bg-gray-100 duration-300 flex h-10 items-center justify-center   rounded-full transition-transform w-10 z-20" id="btnToggleMenu">
+                        <svg :class="btntogglesidebar && 'rotate-90'" class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#334155" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="3" y1="10" x2="21" y2="10"></line>
+                            <line x1="3" y1="20" x2="21" y2="20"></line>
+                        </svg>
+                    </button>
+                </div>
+                @php
+                $countshow2 = 0;
+                // foreach ($categories as $item) {
+                // if (count($item->blogs()->where('status', 1)->get()) > 0) {
+                // $countshow2++;
+                // }
+                // }
+                $countshow2 = $categories->filter(fn($cat) => $cat->blogs->isNotEmpty())->count();
+                @endphp
+
+                @if ($countshow2 > 0)
+                <div wire:ignore.self @mouseleave="open = false, showbackdrop2 = false" class="relative   2xl:relative text-[16px] group px-[.6rem] md:flex items-center gap-1 hidden menu-link">
+                    <div @mousemove=" open = true, firstItemOpen = true, showbackdrop2 = true , openfirstpart()" class="flex items-center h-[76px]">
+                        <a href="#" wire:navigate class="flex items-center">
+                            <h3 class=" text-black">مطالب</h3>
+                        </a>
+                    </div>
+                    <svg class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                        <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
+                    </svg>
+
+                    <div wire:ignore.self x-show="open" class="absolute w-[200px] -right-[10%] top-[100%] pt-2   px-2 z-10">
+                        <div wire:ignore.self @mouseleave="   openfirstpart()" class="bg-white shadow-lg   rounded-md flex flex-col   pb-2">
+                            @foreach($blogCategoriesTree as $index => $category)
+                            <div wire:ignore.self @mouseenter="newsList = false, blogsList = false, open = true    @if ($index === 3 ) ,  openfirstpart() @else ,  closefirst() @endif  " @if ($index===3 ) @else @mouseleave=" open = false" @endif x-data="{ open: false }" class="w-full h-[45px] text-[16px] {{ $index === 3 ? 'pt-2' : '' }}  group md:flex items-center gap-1 hidden !text-gray-900 menu-link">
+                                <div wire:ignore.self class="flex justify-between items-center w-full px-[.6rem]">
+                                    <a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate class="flex items-center">
+                                        <h3 class="block px-3 py-1 text-sm rounded mb-1">
+                                            {{ $category->title }}
+                                        </h3>
+                                    </a>
+                                    @if($category->children->isNotEmpty())
+                                    <svg class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%; transform:rotate(90deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
+                                    </svg>
+                                    @endif
+                                </div>
+                                @if($category->children->isNotEmpty())
+                                @php
+                                $cats[] = $category->id;
+                                @endphp
+                                <div wire:ignore.self x-show="open" id="{{ $index === 3 ? 'needopen' : '' }}" class="px-4   max-h-[800px] grid grid-cols-2 gap-1 absolute right-[90%] min-h-[86%] top-[2.2%]   z-10" style="width: max-content;">
+                                    <div wire:ignore.self class="flex flex-col  overflow-auto  max-h-[800px]   bg-white shadow-lg rounded-md   p-2 border min-w-[200px]  w-[800px]">
+                                        <div wire:ignore class="">
+                                            @foreach($category->children->sortByDesc('priority') as $child)
+                                            @include('livewire.partials._nested_index', ['category' => $child, 'topLevelCategory' => $category])
+                                            @endforeach
+                                        </div>
+                                        @if(in_array($category->id, $loadedCategories))
+                                        <div class="mt-auto pt-2">
+                                            <div class="z-50 mb-4 w-fit flex items-center gap-2">
+                                                <h2 class="text-[14px] text-[#16205b] font-bold">
+                                                    <span>برخی از مطالب این بخش</span>
+                                                </h2>
+                                            </div>
+
+                                            <div wire:ignore.self class="grid grid-cols-2 items-start gap-2 relative pb-1 min-h-[210px]" x-show="!loadingStates['{{ $category->id }}'] && (!dynamicBlogs['{{ $category->id }}'] || dynamicBlogs['{{ $category->id }}'].length === 0)">
+                                                @forelse($categoryBlogs[$category->id] ?? [] as $blog)
+                                                <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
+                                                    <a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate class="relative w-[100px] h-[80px]">
+                                                        <img class="w-[100px] h-[80px] border rounded-xl" src="{{ env('APP_URL_IMAGE').'images/'.$blog->image }}" alt="{{ $blog->subject }}">
+                                                    </a>
+                                                    <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
+                                                        <a style="line-height:28px" href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]">
+                                                            {!! $blog->subject !!}
+                                                        </a>
+                                                        <div class="text-xs text-gray-400 flex flex-col justify-center text-[12px]">
+                                                            {{ jdate($blog->published_at)->ago() }}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                @empty
+                                                <div class="col-span-2 text-center py-4 text-gray-500">
+                                                    هیچ مطلبی یافت نشد
+                                                </div>
+                                                @endforelse
+                                            </div>
+
+
+                                            <div class="grid grid-cols-2 items-start gap-2 relative pb-1 ">
+
+                                                <template x-if="loadingStates['{{ $category->id }}']">
+                                                    <template x-for="(text, index) in displayTexts['{{ $category->id }}'] || []" :key="index">
+                                                        <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
+                                                            <div class="relative w-[100px] h-[80px] bg-gray-200 rounded-xl animate-pulse"></div>
+                                                            <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
+                                                                <a style="line-height:28px" class="text-[#005eb9] text-start font-bold text-[14px]" x-text="text"></a>
+                                                            </div>
+                                                        </div>
+                                                    </template>
+                                                </template>
+
+                                                <template x-if="!loadingStates['{{ $category->id }}'] && dynamicBlogs['{{ $category->id }}'] && dynamicBlogs['{{ $category->id }}'].length > 0">
+                                                    <template x-for="blog in dynamicBlogs['{{ $category->id }}']" :key="blog.slug">
+                                                        <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
+                                                            <a :href="'/mag/' + blog.slug + '/'" wire:navigate class="relative w-[100px] h-[80px]">
+                                                                <img class="w-[100px] h-[80px] border rounded-xl" :src="blog.image" :alt="blog.subject">
+                                                            </a>
+                                                            <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
+                                                                <a style="line-height:28px" :href="'/mag/' + blog.slug + '/'" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]" x-html="blog.subject"></a>
+                                                                <div class="text-xs text-gray-400 flex flex-col justify-center text-[12px]">
+                                                                    <span x-text="new Date(blog.published_at).toLocaleDateString('fa-IR')"></span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </template>
+                                                </template>
+
+                                            </div>
+                                        </div>
+                                        @else
+                                        <div class="mt-auto pt-2">
+                                            <div class="z-50 mb-4 w-fit flex items-center gap-2">
+                                                <h2 class="text-[14px] text-[#16205b] font-bold">
+                                                    <span>برخی از مطالب این بخش</span>
+                                                </h2>
+                                            </div>
+
+                                            <div class="grid grid-cols-2 gap-4" x-show="!loadingStates['{{ $category->id }}'] && (!dynamicBlogs['{{ $category->id }}'] || dynamicBlogs['{{ $category->id }}'].length === 0)">
+                                                <div class="col-span-1 flex items-center gap-4 p-2 h-[100px] animate-pulse">
+                                                    <div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
+                                                    <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
+                                                        <div class="h-4 bg-gray-200 rounded"></div>
+                                                        <div class="h-3 bg-gray-200 rounded w-1/2"></div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-span-1 flex items-center gap-4 p-2 h-[100px] animate-pulse">
+                                                    <div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
+                                                    <div class="flex flex-col gap-2 h-full justify-between w-[73%]">
+                                                        <div class="h-4 bg-gray-200 rounded"></div>
+                                                        <div class="h-3 bg-gray-200 rounded w-1/2"></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        @endif
+
+                                        @if ($category->slug == 'financial-markets')
+                                        <div class="flex flex-col  border-t pt-2">
+                                            <div class="z-50 mb-4 w-fit flex items-center gap-2 gap-y-3">
+                                                <h2 class="text-[14px] text-[#16205b] font-bold">برترین مطالب این بخش</h2>
+                                            </div>
+                                            <div class="grid grid-cols-10 items-center gap-1 justify-evenly mt-2 mb-4">
+                                                <a href="{{route('detail' , ['slug' => 'what-is-ethereum']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-ethereum.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">اتریوم</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-bitcoin']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-bitcoin.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">بیت‌کوین</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-solana']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-solana.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">سولانا</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-tether']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tether.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">تتر</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-bnb']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-bnb.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">بی ان بی</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-cardano']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-cardano.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">کاردانو</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-sui']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-sui.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">سویی</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-chainlink']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-chainlink.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">چین‌لینک</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-tron']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tron.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">ترون</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-dogecoin']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-dogecoin.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">دوج‌کوین</h5>
+                                                </a>
+                                            </div>
+                                        </div>
+                                        @endif
+                                        @if ($category->slug == 'companies')
+                                        <div class="flex flex-col  border-t pt-2">
+                                            <div class="z-50 mb-4 w-fit flex items-center gap-2 gap-y-3">
+                                                <h2 class="text-[14px] text-[#16205b] font-bold">برترین مطالب این بخش</h2>
+                                            </div>
+                                            <div class="grid grid-cols-8 items-center gap-1 justify-evenly mt-2 mb-4">
+
+                                                <a href="{{route('detail' , ['slug' => 'what-is-nvidia']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-nvidia.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">انویدیا</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-apple']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-apple.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">اپل</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-google']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-google.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">گوگل</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-tesla']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tesla.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">تسلا</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-meta']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-meta.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">متا</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-microsoft']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-microsoft.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">مایکروسافت</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-amazon']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-amazon.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">آمازون</h5>
+                                                </a>
+                                                <a href="{{route('detail' , ['slug' => 'what-is-mcdonalds']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
+                                                    <img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-mcdonalds.svg'}}" alt="">
+                                                    <h5 class="text-[14px]">مک‌دونالد</h5>
+                                                </a>
+
+                                            </div>
+                                        </div>
+                                        @endif
+                                    </div>
+                                </div>
+                                @endif
+                            </div>
+                            @endforeach
+                        </div>
+                    </div>
+                </div>
+                @endif
+
+                @php
+                $countshow = 0;
+                // foreach ($categoriesNotBlog as $item) {
+                // if (count($item->blogs()->where('status', 1)->get()) > 0) {
+                // $countshow++;
+                // }
+                // }
+                $countshow = $categoriesNotBlog->filter(fn($cat) => $cat->blogs->isNotEmpty())->count();
+                @endphp
+
+                @if ($countshow > 0)
+                <div @mouseenter="newsList = false , blogsList = false , showbackdrop2 = false , document.querySelector('body').classList.remove('overflow-hidden') " x-data="{ open: false }" class="relative py-6 2xl:relative text-[16px] group px-[.6rem] md:flex items-center gap-1 hidden   menu-link">
+                    <div @mouseenter="open = true" @mouseleave="open = false" lass="flex items-center  ">
+                        <a href="#" wire:navigate class="flex items-center">
+                            <h3 class="    text-black  ">
+                                اخبار
+                            </h3>
+                        </a>
+                    </div>
+                    <div x-transition x-show="open" @mouseenter="open = true" @mouseleave="open = false" class="absolute w-[200px] -right-[10%] top-[65%]  py-9  px-2 z-10  ">
+                        <div class="bg-white shadow-lg border rounded-md flex flex-col gap-3    py-2 ">
+                            @foreach ($categoriesNotBlog->sortByDesc('priority') as $item)
+                            @if (count($item->blog_category()) > 0)
+                            @if (!is_null($item->parent_id))
+                            {{-- @php--}}
+                            {{-- $parent = App\Models\Category::where( 'id', $item->parent_id, )->first();--}}
+                            {{-- @endphp--}}
+                            <a href="{{ route('NewsCategory.show', ['slug' => $item->slug]).'/' }}" wire:navigate class="block px-3 py-1 text-sm hover:bg-gray-100 rounded mb-1">
+                                {{ $item->fparent->title }} {{ $item->title }}
+                            </a>
+                            @endif
+                            @endif
+                            @endforeach
+                        </div>
+                    </div>
+                    <svg x-transition class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                        <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
+                    </svg>
+                </div>
+                @endif
+
+                <a @mouseenter="newsList = false , blogsList = false , showbackdrop2 = false , document.querySelector('body').classList.remove('overflow-hidden') " href="{{ route('dictionary.main') . '/' }}" wire:navigate class="menu-link   text-black  px-[.6rem] py-4 hidden lg:block  text-[16px]   ">فرهنگ لغت</a>
+
+                <div @mouseenter="newsList = false , blogsList = false" class="hidden md:flex ms-auto items-center  gap-3">
+                    <button id="buttonside" @click=" searchbar = true , showbackdrop = true , openinput() " class="relative w-[70%] cursor-pointer   ">
+                        <input @click=" searchbar = true , showbackdrop = true , openinput() " style=" border:none ; box-shadow: none;" autocomplete="off" type="text" class="block pe-4 py-3 text-sm text-gray-900 border mx-auto border-gray-300 cursor-pointer  ps-10  ring-0 rounded-lg rounded-t-none md:rounded-t-lg rounded-b-none md:rounded-b-lg bg-gray-100  w-full  focus:outline-none focus:ring-0  border-b disabled" placeholder="جستجوی مطالب و اخبار">
+                        <div class="cursor-pointer z-[3500]  me-2 pb-1 absolute top-[0.48rem] right-2 w-[30px] h-[30px]  rounded-md bg-gray-200">
+                            <div class="text-gray-500 font-bold text-[20px] pt-0.5">/</div>
+                        </div>
+                    </button>
+
+                    <a x-data="{ menuMore: false }" @mousemove="menuMore = true " @mouseout=" newsList = false , blogsList = false " href="https://ahrominvest.ir/app" class="py-6  relative group">
+                        <svg class="w-[25px] h-[25px] mx-1 fill-[#334155]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M280 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 270.1-95-95c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 369c9.4 9.4 24.6 9.4 33.9 0L409 233c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95L280 24zM128.8 304L64 304c-35.3 0-64 28.7-64 64l0 80c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-80c0-35.3-28.7-64-64-64l-64.8 0-48 48L448 352c8.8 0 16 7.2 16 16l0 80c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-80c0-8.8 7.2-16 16-16l112.8 0-48-48zM432 408a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z">
+                            </path>
+                        </svg>
+                        <ul style="    right: -250%;   " :class="menuMore || 'hidden'" class="mega-menu-container my-2 w-40 overflow-hidden rounded-xl bg-white py-2  shadow group-hover:absolute group-hover:block top-14 hidden">
+                            <div class="  text-center items-center justify-center flex flex-col border-slate-300 pt-2 pb-1 px-2 space-y-1">
+                                <div class="flex flex-nowarp gap-2 items-center">
+                                    <img src="https://ahrominvest.ir/page/qr.svg" class="w-34 h-34" alt="" srcset="">
+                                </div>
+                                <div>
+                                    <p class="text-xs font-black flex justify-center">برای دانلود اسکن کنید!</p>
+                                </div>
+                            </div>
+                        </ul>
+                    </a>
+                    <div id="header_btn_chat2" class="w-[25px] h-[25px] mx-1">
+                        <svg class="w-[25px] h-[25px] fill-[#334155] " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M48 256C48 141.1 141.1 48 256 48s208 93.1 208 208l0 144.1c0 22.1-17.9 40-40 40L313.6 440c-8.3-14.4-23.8-24-41.6-24l-32 0c-26.5 0-48 21.5-48 48s21.5 48 48 48l32 0c17.8 0 33.3-9.7 41.6-24l110.4 .1c48.6 0 88.1-39.4 88.1-88L512 256C512 114.6 397.4 0 256 0S0 114.6 0 256l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40zm112-32l0 112c-17.7 0-32-14.3-32-32l0-48c0-17.7 14.3-32 32-32zM80 256l0 48c0 44.2 35.8 80 80 80l16 0c17.7 0 32-14.3 32-32l0-144c0-17.7-14.3-32-32-32l-16 0c-44.2 0-80 35.8-80 80zm272-32c17.7 0 32 14.3 32 32l0 48c0 17.7-14.3 32-32 32l0-112zm80 32c0-44.2-35.8-80-80-80l-16 0c-17.7 0-32 14.3-32 32l0 144c0 17.7 14.3 32 32 32l16 0c44.2 0 80-35.8 80-80l0-48z">
+                            </path>
+                        </svg>
+                    </div>
+                </div>
+
+            </div>
+
+
+
+            <div @click="   showbackdrop = false , searchbar = false" wire:ignore x-show="showbackdrop" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); filter: blur(8px);" class="fixed top-0 right-0 h-screen w-screen ">
+            </div>
+
+
+
+        </div>
+        @if ($countshow > 0)
+        <div @mouseenter="newsList = false" wire:ignore x-show="newsList" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); " class="absolute   right-0 h-screen w-screen ">
+        </div>
+        @endif
+        @if ($countshow2 > 0)
+        <div @mouseenter="blogsList = false" wire:ignore x-show="blogsList" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); " class="absolute   right-0 h-screen w-screen ">
+
+        </div>
+        @endif
+    </header>
+
+    <div wire:ignore x-show="showbackdrop2" x-cloak style="z-index: 100 ; backdrop-filter: brightness(0.5); filter: blur(4px);" class="fixed top-0 right-0 h-screen w-screen ">
+    </div>
+
+
+</div>
+
+
+
+
+@script
+<script>
+    Alpine.data('headerPartials', () => ({
+        isFixed: false
+        , btntogglesidebar: false
+        , newsList: false
+        , searchbar: false
+        , showbackdrop: false
+        , showbackdrop2: false
+        , opend: false
+        , open: false
+        , blogsList: false
+        , menuMore: false
+        , firstItemOpen: true
+        , text: ''
+        , hoveredSubMenuIndex: null,
+
+        loadingStates: {}
+        , loadingNested: ''
+        , loadingFetch: false
+        , textRotationIntervals: {}
+        , tempBlogsByCat: {}
+        , displayTexts: {}
+        , dynamicBlogs: {}
+        , currentLoadingAnimation: null
+        , currentLoadingCategory: null
+        , activeTab: 'posts'
+        , selectedCategory: null,
+
+        openinput() {
+            this.$nextTick(() => {
+                let search = document.getElementById("inputFieldsearch");
+                if (search) {
+                    search.focus();
+                    console.log("Input focused:", search);
+                } else {
+                    console.error("Input element not found!");
+                }
+            });
+        },
+
+        closefirst() {
+            setTimeout(() => {
+                const prevOpenItem = document.querySelector('[id=\'needopen\']');
+                prevOpenItem.style.display = 'none';
+            }, 1);
+        },
+
+        init() {
+            let prevScrollpos = window.pageYOffset;
+            window.addEventListener('scroll', () => {
+                const currentScrollPos = window.pageYOffset;
+                prevScrollpos = currentScrollPos;
+            });
+
+            this.$watch('activeTab', (value) => {
+                console.log('value');
+                @this.set('activeTab', value);
+                @this.resetCategory();
+                this.selectedCategory = null;
+                @this.searchBox();
+            });
+
+            this.$watch('selectedCategory', (value) => {
+                if (value) {
+                    console.log(value, this.activeTab);
+                    @this.selectCategory(value);
+                }
+            });
+
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const categoryId = entry.target.getAttribute('data-category-id');
+                        if (categoryId) {
+                            this.$wire.loadCategoryData(categoryId);
+                        }
+                    }
+                });
+            }, {
+                threshold: 0.1
+            });
+
+            document.querySelectorAll('[data-category-id]').forEach(el => {
+                observer.observe(el);
+            });
+
+            const cats = @json($cats);
+            cats.forEach(id => {
+                this.$wire.loadCategoryData(id);
+            })
+
+            this.$wire.getLastNewsPosts(0)
+        },
+
+        handleCategoryHover(categoryId, index) {
+            this.newsList = false;
+            this.blogsList = false;
+            this.open = true;
+
+            if (!this.$wire.loadedCategories.includes(categoryId)) {
+                this.$wire.loadCategoryData(categoryId);
+            }
+
+            if (index !== 3) {
+                this.closefirst();
+            }
+        },
+
+        checkInputLength() {
+            if (document.getElementById('inputFieldsearch').value.length >= 3) {
+                this.showbackdrop = true;
+                this.$wire.searchBox();
+            } else {
+                this.$wire.refreshsearch();
+            }
+        },
+
+        setactiveTab(value) {
+            @this.set('activeTab', value);
+            @this.resetCategory();
+            this.selectedCategory = null;
+            @this.searchBox();
+        },
+
+        openfirstpart() {
+            setTimeout(() => {
+                console.log('openfirstpart');
+                const prevOpenItem = document.querySelector('[id=\'needopen\']');
+                prevOpenItem.style.display = '';
+            }, 1);
+
+        },
+
+        fetchCategoryBlogs(subCatId, topLevelCatId) {
+            if (this.loadingStates[topLevelCatId]) return;
+
+            this.loadingFetch = true;
+            fetch(`{{url('api/category-blogs/${subCatId}')}}`)
+                .then(response => response.json())
+                .then(data => {
+
+                    if (data.blogs && data.blogs.length >= 4) {
+                        this.dynamicBlogs[topLevelCatId] = [];
+                        this.loadingStates[topLevelCatId] = true;
+                        this.loadingNested = subCatId;
+                        this.startLoadingAnimation(data.blogs, topLevelCatId);
+                    } else {
+                        // this.dynamicBlogs[topLevelCatId] = [];
+                        this.loadingStates[topLevelCatId] = false;
+                        this.loadingNested = '';
+                        this.loadingFetch = false;
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    this.loadingStates[topLevelCatId] = false;
+                    this.loadingNested = '';
+                    this.loadingFetch = false;
+                });
+        },
+
+        startLoadingAnimation(blogs, topLevelCatId) {
+            this.tempBlogsByCat[topLevelCatId] = blogs;
+
+            this.displayTexts[topLevelCatId] = Array(4).fill().map(() => {
+                return this.tempBlogsByCat[topLevelCatId][Math.floor(Math.random() * this.tempBlogsByCat[topLevelCatId].length)].subject;
+            });
+
+            if (this.textRotationIntervals[topLevelCatId]) clearInterval(this.textRotationIntervals[topLevelCatId]);
+            this.textRotationIntervals[topLevelCatId] = setInterval(() => {
+                this.displayTexts[topLevelCatId] = (this.displayTexts[topLevelCatId] || []).map(() => {
+                    return this.tempBlogsByCat[topLevelCatId][Math.floor(Math.random() * this.tempBlogsByCat[topLevelCatId].length)].subject;
+                });
+            }, 30);
+
+            const randomBlogs = [];
+            const blogsCopy = [...this.tempBlogsByCat[topLevelCatId]];
+            for (let i = 0; i < 4; i++) {
+                const randomIndex = Math.floor(Math.random() * blogsCopy.length);
+                randomBlogs.push(blogsCopy.splice(randomIndex, 1)[0]);
+            }
+
+            const imageLoadPromises = randomBlogs.map(blog => new Promise(resolve => {
+                const img = new Image();
+                img.src = blog.image;
+                img.onload = resolve;
+                img.onerror = resolve;
+            }));
+            const minDelayPromise = new Promise(resolve => setTimeout(resolve, 200));
+
+            Promise.all([...imageLoadPromises, minDelayPromise]).then(() => {
+                clearInterval(this.textRotationIntervals[topLevelCatId]);
+                this.dynamicBlogs[topLevelCatId] = randomBlogs;
+                this.loadingStates[topLevelCatId] = false;
+                this.loadingNested = '';
+            });
+
+            this.loadingFetch = false;
+        },
+
+        showLoadingAnimation(categoryId, containerId) {
+            if (this.currentLoadingAnimation) {
+                this.currentLoadingAnimation.destroy();
+                this.currentLoadingAnimation = null;
+            }
+
+            // if (this.currentLoadingCategory === categoryId) {
+            //     this.currentLoadingCategory = null;
+            //     return;
+            // }
+
+            this.currentLoadingCategory = categoryId;
+
+            const animationPath = '{{ asset("loti/star-magic.json") }}';
+
+            const animationContainer = document.getElementById(containerId);
+
+            animationContainer.innerHTML = '';
+
+            const animDiv = document.createElement('div');
+            animDiv.id = `lottie-anim-${categoryId}`;
+            animDiv.style.width = '20px';
+            animDiv.style.height = '20px';
+            animationContainer.appendChild(animDiv);
+
+            this.currentLoadingAnimation = lottie.loadAnimation({
+                container: animDiv
+                , renderer: 'svg'
+                , loop: true
+                , autoplay: true
+                , path: animationPath
+            });
+
+            this.currentLoadingAnimation.setSpeed(1.5);
+        }
+    , }));
+
+</script>
+@endscript

resources/views/livewire/partials/three-col.blade.php

@@ -0,0 +1,163 @@
+<div>
+    @if (count($category->mag_blogs()) > 0)
+    <div>
+        <div class="text-black my-3 lg:my-8 flex text-[16px] lg:text-[20px] text-start justify-between items-center gap-2">
+            <span class="font-bold flex items-center gap-2 text-[#16205b]">
+                <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
+                مطالب {{$category->title}}
+            </span>
+            <a class="text-[#16205b] md:flex hidden rounded-xl px-2 text-[16px]" href="{{ route('CategoryBlog.index', ['slug' => $category->slug]) . '/' }}" wire:navigate>مشاهده همه</a>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
+            @foreach ($category->mag_blogs() as $blog)
+            <div class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
+                <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
+                    <div x-data="{
+                                loaded: false,
+                                init() {
+                                    const observer = new IntersectionObserver((entries) => {
+                                        entries.forEach(entry => {
+                                            if (entry.isIntersecting && !this.loaded) {
+
+                                                const img = new Image();
+                                                img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image  }}';
+                                                img.onload = () => {
+                                                    this.loaded = true;
+
+                                                    observer.unobserve(this.$el);
+                                                };
+                                            }
+                                        });
+                                    }, {
+                                        rootMargin: '200px'
+                                    });
+
+                                    observer.observe(this.$el);
+                                }
+                                }" class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
+
+
+                        <img x-cloak x-show="loaded"
+                            x-transition:enter="transition ease-out duration-300"
+                            x-transition:enter-start="opacity-0"
+                            x-transition:enter-end="opacity-100"
+                            :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image  }}'"
+                            alt="{{ $blog->subject }}"
+                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
+                            loading="lazy">
+                    </div>
+                </a>
+                <div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
+                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                        {!! $blog->subject !!}
+                    </a>
+                    <div class="md:block hidden text-[#16205b]">
+                        @php
+                        $preview = Str::limit($blog->preview, 80, '...');
+                        @endphp
+                        {!! $preview !!}
+                    </div>
+                    <div class="flex gap-1 text-white md:mt-auto">
+                        <div class="hidden md:flex flex-col justify-center">
+                            <img class="bg-cover bg-center rounded-full size-8" src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture   }}" alt="">
+                        </div>
+                        <div class="text-xs text-gray-600 flex flex-col justify-center">
+                            {{ $blog->user->full_name }}
+                        </div>
+                        <span style="font-variation-settings: 'wght' 500;" class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
+                        <div class="text-xs text-gray-600 flex flex-col justify-center">
+                            {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            @endforeach
+        </div>
+        <a href=" {{cleanRouteUrl('CategoryBlog.index' , ['slug' => $category->slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block   mb-6 rounded-xl  text-center  border border-[#084642] text-[#084642]">
+            مشاهده مطالب بیشتر
+        </a>
+    </div>
+    @elseif(count($category->mag_news()) > 0)
+    <div>
+        <div class="text-black my-3 lg:my-8 flex text-[16px] lg:text-[20px] text-start justify-between items-center gap-2">
+            <span class="font-bold flex items-center gap-2 text-[#16205b]">
+                <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
+                @php
+                $parent = App\Models\Category::where('id', $category->parent_id)->first();
+                if (!is_null($parent)) {
+                $parent = $parent;
+                } else {
+                $parent = $category;
+                }
+                @endphp
+                {{$parent->title}} {{$category->title}}
+            </span>
+            <a class="text-[#16205b] md:flex hidden rounded-xl px-2 text-[16px]" href=" {{ route('NewsCategory.show', ['slug' => $category->slug]) . '/' }}" wire:navigate>مشاهده همه</a>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
+            @foreach ($category->mag_news() as $blog)
+            <div class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
+                <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
+                    <div x-data="{
+                                loaded: false,
+                                init() {
+                                    const observer = new IntersectionObserver((entries) => {
+                                        entries.forEach(entry => {
+                                            if (entry.isIntersecting && !this.loaded) {
+                                                const img = new Image();
+                                                img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
+                                                img.onload = () => {
+                                                    this.loaded = true;
+                                                    observer.unobserve(this.$el);
+                                                };
+                                            }
+                                        });
+                                    }, { rootMargin: '200px' });
+
+                                    observer.observe(this.$el);
+                                }
+                            }" class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
+
+
+                        <img x-cloak x-show="loaded"
+                            x-transition:enter="transition ease-out duration-300"
+                            x-transition:enter-start="opacity-0"
+                            x-transition:enter-end="opacity-100"
+                            :src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image   }}'"
+                            alt="{{ $blog->subject }}"
+                            class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
+                            loading="lazy">
+                    </div>
+                </a>
+                <div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
+                    <a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                        {!! $blog->subject !!}
+                    </a>
+                    <div class="md:block hidden text-[#16205b]">
+                        @php
+                        $preview = Str::limit($blog->preview, 80, '...');
+                        @endphp
+                        {!! $preview !!}
+                    </div>
+                    <div class="flex gap-1 text-white md:mt-auto">
+                        <div class="hidden md:flex flex-col justify-center">
+                            <img class="bg-cover bg-center rounded-full size-8" src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture   }}" alt="">
+                        </div>
+                        <div class="text-xs text-gray-600 flex flex-col justify-center">
+                            {{ $blog->user->full_name }}
+                        </div>
+                        <span style="font-variation-settings: 'wght' 500;" class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
+                        <div class="text-xs text-gray-600 flex flex-col justify-center">
+                            {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            @endforeach
+        </div>
+        <a href=" {{ route('NewsCategory.show', ['slug' => $category->slug]) }}" wire:navigate class="w-full p-3 md:hidden block   mb-6 rounded-xl  text-center  border border-[#084642] text-[#084642]">
+            مشاهده مطالب بیشتر
+        </a>
+    </div>
+    @endif
+</div>

resources/views/livewire/search.blade.php

@@ -0,0 +1,170 @@
+@push('style_css')
+<style>
+    .max-w-5xl {
+        max-width: 1600px !important;
+    }
+</style>
+@endpush
+@section('robots')
+<meta name="robots" content="noindex, nofollow">
+@endsection
+<div x-data="search">
+    <div @click.outside="    searchbar = false  , showbackdrop = false   , text = ''  "
+        class="   gap-4 max-w-5xl mx-auto   items-center w-full justify-center  px-4 py-8 md:py-4   lg:flex text-slate-900   relative">
+        <div style="z-index: 1001;" class="flex flex-col         w-[100%]   rounded-xl">
+            <h3 class="my-3 font-bold flex items-center  text-[16px] lg:text-[22px] gap-2">
+                <div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]  "> </div> <span>نتایج جستجو برای {{ $search }}</span>
+            </h3>
+            <div class="gap-2 mb-3">
+                @if (count($blogsSearchs) > 0)
+                <div
+                    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-8 md:my-4 lg:my-8 w-full">
+                    @foreach ($blogsSearchs as $blog)
+                    <div
+                        class="w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-slate-100 md:shadow">
+                        <a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate
+                            class="relative w-[80px] md:w-full">
+                            <img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
+                                src="{{ asset('images/' . $blog->image) . '/' }}" alt="">
+                        </a>
+                        <div
+                            class="flex justify-start md:justify-normal flex-col md:w-full gap-2 h-full md:p-4">
+                            <a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate
+                                class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
+                                {!! $blog->subject !!}
+                            </a>
+                            <div class="md:block hidden text-[#16205b]">
+                                @php
+                                $preview = Str::limit($blog->preview, 80, '...');
+                                @endphp
+                                {!! $preview !!}
+                            </div>
+                            <div class="flex gap-1 text-white md:mt-auto">
+                                <div class="hidden md:flex flex-col justify-center">
+                                    <img class="bg-cover bg-center rounded-full size-8" src="{{ asset($blog->user->picture) }}" alt="">
+                                </div>
+                                <div class="text-xs text-gray-600 flex flex-col justify-center">
+                                    {{ $blog->user->full_name }}
+                                </div>
+                                <span style="font-variation-settings: 'wght' 500;"
+                                    class="text-xs text-[#A0A4BC] flex flex-col justify-center">|</span>
+                                <div class="text-xs text-gray-600 flex flex-col justify-center">
+                                    {{ jalaliDate($blog->published_at, '%d %B، %Y') }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    @endforeach
+                </div>
+                @else
+                @if (strlen($search) > 0)
+                <div class="flex items-center flex-col mx-auto justify-center gap-4  my-5">
+                    <svg height="75px" width="75px" class="cursor-pointer me-2  "
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 512 512">
+                        <path
+                            d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" />
+                    </svg>
+                    <span class="text-slate-400">موردی یافت نشد!</span>
+                </div>
+                @else
+                @endif
+                @endif
+            </div>
+            @if (count($blogsSearchs) > 0)
+            @if ($blogsSearchs->hasPages())
+
+            <nav class="mt-6">
+                <ul class="pagination flex gap-4">
+                    @if ($blogsSearchs->onFirstPage())
+                    @else
+                    <li><a class="pb-[4px]" href="{{ url('/search?q=' . $search . '&' . 'page=' . $blogsSearchs->currentPage() - 1) }}" wire:navigate rel="prev">&laquo;</a></li>
+                    @endif
+
+                    @foreach ($blogsSearchs->links()->elements as $element)
+                    @if (is_string($element))
+                    <li class="disabled"><span>{{ $element }}</span></li>
+                    @endif
+
+                    @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                    @if ($page == $blogsSearchs->currentPage())
+                    <li class="active"><span>{{ $page }}</span></li>
+                    @elseif(
+                    $page == 1 ||
+                    $page == $blogsSearchs->lastPage() ||
+                    ($page >= $blogsSearchs->currentPage() - 1 && $page <= $blogsSearchs->currentPage() + 1))
+                        @if ($page == 1)
+                        <li><a href="{{ url('/search?q=' . $search) }}" wire:navigate>{{ $page }}</a></li>
+                        @else
+                        <li><a href="{{ url('/search?q=' . $search . '&' . 'page=' . $page) }}" wire:navigate>{{ $page }}</a></li>
+                        @endif
+                        @elseif($page == 2 || $page == $blogsSearchs->lastPage() - 1)
+                        <li class="disabled"><span class="pb-[6px]">...</span></li>
+                        @endif
+                        @endforeach
+                        @endif
+                        @endforeach
+                        @if ($blogsSearchs->hasMorePages())
+                        <li><a class="pb-[4px]" href="{{ url('/search?q=' . $search . '&' . 'page=' . $blogsSearchs->currentPage() + 1) }}" wire:navigate rel="next">&raquo;</a></li>
+                        @else
+                        @endif
+                </ul>
+            </nav>
+
+            @endif
+            @endif
+        </div>
+    </div>
+</div>
+@script
+<script>
+    Alpine.data('search', () => ({
+        isFixed: false,
+        btntogglesidebar: false,
+        menuMore: false,
+        searchbar: false,
+        showbackdrop: false,
+        text: '',
+        init() {
+            document.getElementById("buttonside").addEventListener("click", function() {
+                setTimeout(() => {
+                    document.getElementById("inputSearchPage").focus();
+                }, 100);
+            });
+            document.addEventListener("keydown", function(event) {
+                if (event.key == "/") {
+                    setTimeout(() => {
+                        document.getElementById("inputSearchPage").focus();
+                    }, 100);
+                }
+            });
+
+            window.addEventListener('scroll', () => {
+                const currentScrollPos = window.pageYOffset;
+                const isScrollingUp = this.prevScrollpos > window.pageYOffset;
+                const headerScroll = document.getElementById('headerScroll');
+            });
+
+
+        },
+
+        checkInputLength() {
+
+            console.log(document.getElementById('inputSearchPage').value.length);
+            if (document.getElementById('inputSearchPage').value.length >= 3) {
+
+                this.showbackdrop = true;
+                this.$wire.searchBox();
+
+            } else {
+
+                this.$wire.refreshsearch();
+
+            }
+        },
+
+
+    }));
+</script>
+@endscript

resources/views/livewire/server.blade.php

@@ -0,0 +1,888 @@
+<!DOCTYPE html>
+<html lang="fa">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ahrom Server Status</title>
+    <script defer src="{{ asset('server_status/alpins.js') }}"></script>
+    <script src="{{ asset('server_status/tailwind.js') }}"></script>
+    <script src="{{ asset('server_status/index.js') }}"></script>
+    <script src="{{ asset('server_status/map.js') }}"></script>
+    <script src="{{ asset('server_status/worldLow.js') }}"></script>
+    <style>
+        /* Gauge Wrapper */
+        .gauge {
+            width: 90%;
+            height: 100%;
+            position: relative;
+        }
+
+        /* Gauge Arc */
+        .gauge-arc {
+            width: 100%;
+            height: 200%;
+            /* semicircle */
+            border-radius: 50%;
+            clip-path: inset(0 0 50% 0);
+            --color: limegreen;
+            --deg: 0deg;
+            background-image: radial-gradient(closest-side,
+                    #1e1e1e 0%,
+                    #1e1e1e calc(100% - 1rem),
+                    transparent calc(100% - 1rem)),
+                conic-gradient(from -90deg,
+                    var(--color) 0deg var(--deg),
+                    #121212 var(--deg) 180deg,
+                    transparent 180deg);
+            transition: --color 0.6s ease, --deg 0.4s ease;
+        }
+
+        /* Gauge Info */
+        .gauge-info {
+            position: absolute;
+            bottom: 0px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 3px;
+            color: #e2e2e2;
+            text-align: center;
+        }
+
+        .percent-number {
+            font-size: clamp(1.3rem, 6vw, 0.6rem);
+            font-weight: bold;
+            color: #e2e2e2;
+        }
+
+        .percent-sign {
+            font-size: clamp(1rem, 3vw, 0.5rem);
+            font-weight: bold;
+            margin-left: 4px;
+            transition: color 0.4s ease;
+        }
+
+        .usage {
+            /* font-size: clamp(0.7rem, 1.2vw, 0.4rem); */
+            opacity: 0.85;
+            text-shadow: 0 0 6px #000;
+        }
+
+        /* Neon Badge */
+        /* .neon-badge {
+            font-size: 0.9rem;
+            font-weight: bold;
+            padding: 6px 14px;
+            border-radius: 9999px;
+            background: rgba(0, 0, 0, 0.4);
+            color: var(--badge-color, limegreen);
+            text-shadow: 0 0 2px #000, 0 0 3px var(--badge-color),
+                0 0 6px var(--badge-color), 0 0 12px var(--badge-color);
+            box-shadow: 0 0 4px var(--badge-color),
+                0 0 8px var(--badge-color),
+                inset 0 0 2px rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        } */
+
+        .grid-cols-7>div {
+            padding: 4px;
+            background-color: #1e1e1e;
+        }
+
+        .col-span-5>div {
+            padding: 4px;
+            background-color: #1e1e1e;
+        }
+
+        .pulse-connected {
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+            }
+
+            70% {
+                box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
+            }
+
+            100% {
+                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+            }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-[#121212] h-screen overflow-hidden">
+    <div x-data="fullscreenHandler()" x-init="init()"
+        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-[40%]">
+        <button x-show="!isFullscreen" @click="enterFullscreen()"
+            class="px-5 py-32 bg-amber-500 hover:bg-amber-400 rounded-lg w-full text-6xl font-bold">
+            Fullscreen mode
+        </button>
+    </div>
+
+    <div x-data="serverMetrics()" x-init="init()" class="h-full">
+        <!-- Grid row at 25% of viewport height -->
+        <div class="grid grid-cols-7 h-[25vh] max-h-[25vh] m-3 mb-0 items-stretch rounded-2xl gap-2">
+            <!-- Cell 1: Gauge -->
+            <div x-data="{
+                    get percent() { return data?.cpu?.usage || 0 },
+                    get color() {
+                        if (this.percent <= 50) return 'limegreen';
+                        if (this.percent <= 70) return 'yellow';
+                        return 'red';
+                    }
+                }" class="flex flex-col items-center justify-center h-full w-full overflow-hidden rounded-2xl"
+                x-effect="
+                    $el.querySelector('.gauge-arc').style.setProperty('--color', color);
+                    $el.querySelector('.gauge-arc').style.setProperty('--deg', (percent * 1.8) + 'deg');
+                ">
+                <div class="gauge">
+                    <div class="gauge-arc"></div>
+                    <div class="gauge-info">
+                        <div class="flex flex-col items-center justify-center gap-2">
+                            <div class="flex items-center justify-center">
+                                <span class="percent-number leading-none" x-text="percent"></span>
+                                <span class="percent-sign">%</span>
+                            </div>
+                            <!-- <div class="usage text-[#e2e2e2]" x-text="used + ' MB / ' + Math.round(total/1024) + ' GB'"></div> -->
+                            <div class="neon-badge text-sm font-semibold">CPU Usage</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div x-data="{
+                    get percent() { return data?.memory?.usagePercent || 0 },
+                    get color() {
+                        if (this.percent <= 50) return 'limegreen';
+                        if (this.percent <= 70) return 'yellow';
+                        return 'red';
+                    }
+                }" class="flex flex-col items-center justify-center h-full w-full overflow-hidden rounded-2xl"
+                x-effect="
+                    $el.querySelector('.gauge-arc').style.setProperty('--color', color);
+                    $el.querySelector('.gauge-arc').style.setProperty('--deg', (percent * 1.8) + 'deg');
+                ">
+                <div class="gauge">
+                    <div class="gauge-arc"></div>
+                    <div class="gauge-info">
+                        <div class="flex items-center justify-center">
+                            <span class="percent-number leading-none" x-text="percent"></span>
+                            <span class="percent-sign">%</span>
+                        </div>
+                        <div class="usage text-[#e2e2e2] text-xs"
+                            x-text="data?.memory ? `${formatBytes(data.memory.used)} / ${formatBytes(data.memory.total)}` : '--'">
+                        </div>
+                        <div class="neon-badge text-sm font-semibold">Memory Usage</div>
+                    </div>
+                </div>
+            </div>
+            <section class="grid grid-cols-2 col-span-5 items-stretch rounded-2xl gap-2">
+                <div class="flex flex-col items-center justify-center h-full w-full text-[#e2e2e2] gap-3 rounded-2xl">
+                    <dt class="text-2xl font-bold text-[#e2e2e2] truncate">Uptime</dt>
+                    <dd class="flex items-center">
+                        <div class="text-xl font-semibold text-[#e2e2e2]" style="word-spacing: 190px;"
+                            x-text="data?.uptime ? `${data.uptime.days}d ${data.uptime.hours}h ${data.uptime.minutes}m` : '--'">
+                        </div>
+                    </dd>
+                </div>
+                <div class="flex flex-col items-center justify-center h-full w-full text-[#e2e2e2] gap-2 rounded-2xl">
+                    <dt class="text-2xl font-bold text-[#e2e2e2]">System Load</dt>
+                    <div class="grid grid-cols-3 gap-2 w-full">
+                        <div class="text-center flex flex-col gap-2">
+                            <div class="text-md font-semibold text-[#e2e2e2]">1 min</div>
+                            <div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.load?.one || '--'"></div>
+                        </div>
+                        <div class="text-center flex flex-col gap-2">
+                            <div class="text-md font-semibold text-[#e2e2e2]">5 min</div>
+                            <div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.load?.five || '--'"></div>
+                        </div>
+                        <div class="text-center flex flex-col gap-2">
+                            <div class="text-md font-semibold text-[#e2e2e2]">15 min</div>
+                            <div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.load?.fifteen || '--'">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Cell 1: Gauge -->
+            <div x-data="{
+                    get percent() { return (data?.disk?.percent || '0').replace('%', '') },
+                    get color() {
+                        if (this.percent <= 50) return 'limegreen';
+                        if (this.percent <= 70) return 'yellow';
+                        return 'red';
+                    }
+                }" class="flex flex-col items-center justify-center h-full w-full overflow-hidden rounded-2xl"
+                x-effect="
+                    $el.querySelector('.gauge-arc').style.setProperty('--color', color);
+                    $el.querySelector('.gauge-arc').style.setProperty('--deg', (percent * 1.8) + 'deg');
+                ">
+                <div class="gauge">
+                    <div class="gauge-arc"></div>
+                    <div class="gauge-info">
+                        <div class="flex items-center justify-center">
+                            <span class="percent-number leading-none" x-text="percent"></span>
+                            <span class="percent-sign">%</span>
+                        </div>
+                        <div class="usage text-[#e2e2e2] text-xs"
+                            x-text="data?.disk ? `${data.disk.used} / ${data.disk.size}` : '--'"></div>
+                        <div class="neon-badge text-sm font-semibold">Disk Usage</div>
+                    </div>
+                </div>
+            </div>
+
+            <div x-data="{
+                    get percent() { return parseFloat(((data?.swap?.used || 0) / 8000) * 100).toFixed(1) },
+                    get color() {
+                        if (this.percent <= 50) return 'limegreen';
+                        if (this.percent <= 70) return 'yellow';
+                        return 'red';
+                    }
+                }" class="flex flex-col items-center justify-center h-full w-full overflow-hidden rounded-2xl"
+                x-effect="
+                    $el.querySelector('.gauge-arc').style.setProperty('--color', color);
+                    $el.querySelector('.gauge-arc').style.setProperty('--deg', (percent * 1.8) + 'deg');
+                ">
+                <div class="gauge">
+                    <div class="gauge-arc"></div>
+                    <div class="gauge-info">
+                        <div class="flex items-center justify-center">
+                            <span class="percent-number leading-none" x-text="percent"></span>
+                            <span class="percent-sign">%</span>
+                        </div>
+                        <div class="usage text-[#e2e2e2] text-xs"
+                            x-text="data?.swap ? `${data?.swap?.used} MB / ${8000} GB` : '--'"></div>
+                        <div class="neon-badge text-sm font-semibold">Swap Usage</div>
+                    </div>
+                </div>
+            </div>
+            <section class="grid grid-cols-2 col-span-5 items-stretch rounded-2xl gap-2">
+                <div class="flex flex-col items-center justify-center h-full w-full text-[#e2e2e2] gap-2 rounded-2xl">
+                    <dt class="text-2xl font-bold text-[#e2e2e2]">System Info</dt>
+                    <div class="grid grid-cols-3 gap-2 w-full">
+                        <div class="text-center flex flex-col gap-2">
+                            <div class="text-md font-medium text-[#e2e2e2]">Processes</div>
+                            <div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.processCount || '--'"></div>
+                        </div>
+                        <div class="text-center flex flex-col gap-2">
+                            <div class="text-md font-medium text-[#e2e2e2]">Pending Updates</div>
+                            <div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.updates?.total || '--'">
+                            </div>
+                        </div>
+                        <div class="text-center flex flex-col gap-2">
+                            <div class="text-md font-medium text-[#e2e2e2]">Needs Reboot</div>
+                            <div :class="`text-xl font-semibold ${(data?.needsReboot !== undefined && data?.needsReboot) ? 'text-red-600' : 'text-[#e2e2e2]'}`"
+                                x-text="data?.needsReboot !== undefined ? (data.needsReboot ? 'Yes' : 'No') : '--'">
+                            </div>
+                        </div>
+                        <!-- <div class="text-center flex flex-col gap-2">
+                            <div class="text-sm font-medium text-[#e2e2e2]">Disk Space</div>
+                            <div class="text-md font-semibold text-[#e2e2e2]"
+                                x-text="data?.disk ? `${data.disk.used} / ${data.disk.size}` : '--'">
+                            </div>
+                        </div> -->
+                    </div>
+                </div>
+                <div class="flex flex-col items-center justify-center h-full w-full text-[#e2e2e2] gap-2 rounded-2xl">
+                    <dt class="text-2xl font-bold text-[#e2e2e2]">Network Usage</dt>
+                    <div class="grid grid-cols-2 gap-2 w-full">
+                        <div class="text-center flex flex-col gap-2">
+                            <div class="text-md font-medium text-[#e2e2e2]">Today</div>
+                            <div class="text-xl font-semibold text-[#e2e2e2]"
+                                x-text="data?.network?.today ? formatMB(data.network.today.totalMB) : '--'">
+                            </div>
+                        </div>
+                        <div class="text-center flex flex-col gap-2">
+                            <div class="text-md font-medium text-[#e2e2e2]">This Month</div>
+                            <div class="text-xl font-semibold text-[#e2e2e2]"
+                                x-text="data?.network?.month ? formatMB(data.network.month.totalMB) : '--'">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <!-- <div class="flex items-center justify-center h-full w-full text-[#e2e2e2] rounded-2xl">
+                7
+            </div> -->
+        </div>
+        <div class="w-full max-h-[71vh] flex justify-between px-3 mt-3">
+            <div class="mr-3 w-[20vw] h-[71vh] max-h-[71vh] overflow-hidden bg-[#1e1e1e] rounded-xl relative"
+                x-data="ipRequests()" x-init="init()">
+                <div class="px-2 py-2 sm:px-6 border-b border-[#e2e2e2] flex justify-between items-center">
+                    <h2 class="text-lg font-medium text-[#e2e2e2]">IP Requests</h2>
+                    <div class="flex items-center space-x-2">
+                        <span class="h-3 w-3 rounded-full"
+                            :class="connected ? 'bg-green-500 pulse-connected' : 'bg-red-500'"></span>
+                        <span x-text="connected ? 'Connected' : 'Disconnected'" class="text-sm text-[#e2e2e2]"></span>
+                    </div>
+                </div>
+                <div class="px-2 py-2 sm:p-3">
+                    <div x-show="loading" class="text-center py-8">
+                        <div
+                            class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500">
+                        </div>
+                        <p class="mt-2 text-[#e2e2e2]">Loading IP requests...</p>
+                    </div>
+                    <div x-show="!loading && data?.length" class="fade-in">
+                        <table class="min-w-full">
+                            <thead>
+                                <tr>
+                                    <th scope="col"
+                                        class="px-2 py-2 text-center text-xs font-medium text-[#e2e2e2] uppercase tracking-wider border-b border-[#a1a1a1]">
+                                        IP Address</th>
+                                    <th scope="col"
+                                        class="px-2 py-2 text-center text-xs font-medium text-[#e2e2e2] uppercase tracking-wider border-b border-[#a1a1a1]">
+                                        Requests</th>
+                                    <th scope="col"
+                                        class="px-2 py-2 text-center text-xs font-medium text-[#e2e2e2] uppercase tracking-wider border-b border-[#a1a1a1]">
+                                        Last Activity</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-[#121212]">
+                                <template x-for="(item, index) in data" :key="index">
+                                    <tr
+                                        :class="item.count > 15000 ? 'bg-rose-500' : ((index % 2 == 0) ? 'bg-[#121212]' : 'bg-[#1e1e1e]')">
+                                        <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-center text-[#e2e2e2] border-r border-[#a1a1a1]"
+                                            x-text="item.ip"></td>
+                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-center text-[#e2e2e2] border-r border-[#a1a1a1]"
+                                            x-text="item.count">
+                                        </td>
+                                        <td class="px-3 py-2 whitespace-nowrap text-sm text-center text-[#e2e2e2]"
+                                            x-text="item?.last?.replace('.000', '')">
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div x-show="!loading && !data?.length" class="text-center py-8 text-[#e2e2e2]">
+                        No IP request data available
+                    </div>
+                </div>
+            </div>
+            <div x-data="ipCountrySettings()" x-init="init()"
+                class=" w-[71vw] grow h-[71vh] max-h-[71vh] overflow-hidden bg-[#1e1e1e] rounded-xl relative">
+                <template x-if="loading">
+                    <div class="text-center text-[#e2e2e2] mb-4">Loading map data...</div>
+                </template>
+
+                <div id="chartdiv" x-show="!loading" class="shadow-lg rounded-md w-full h-full"></div>
+            </div>
+        </div>
+        <!-- <div class="m-3 max-h-[50%] overflow-hidden bg-[#1e1e1e] rounded-xl relative border border-[#e2e2e2]"
+            x-data="ipRequests()" x-init="init()">
+            <div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
+                <h2 class="text-lg font-medium text-gray-900">IP Requests</h2>
+                <div class="flex items-center space-x-2">
+                    <span class="h-3 w-3 rounded-full"
+                        :class="connected ? 'bg-green-500 pulse-connected' : 'bg-red-500'"></span>
+                    <span x-text="connected ? 'Connected' : 'Disconnected'" class="text-sm text-gray-500"></span>
+                </div>
+            </div>
+            <div class="px-4 py-5 sm:p-6">
+                <div x-show="loading" class="text-center py-8">
+                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500">
+                    </div>
+                    <p class="mt-2 text-gray-500">Loading IP requests...</p>
+                </div>
+                <div x-show="!loading && data?.length" class="fade-in overflow-x-auto">
+                    <div class="flex flex-wrap gap-4">
+                        <template x-for="(chunk, cIndex) in chunkedData()" :key="cIndex">
+                            <table
+                                class="bg-[#76ABAE] divide-y divide-gray-200 w-[20%] min-w-[200px] text-sm rounded shadow">
+                                <thead class="bg-gray-50">
+                                    <tr>
+                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP
+                                            Address</th>
+                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                                            Requests</th>
+                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Last
+                                            Activity</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-gray-200">
+                                    <template x-for="(item, index) in chunk" :key="index">
+                                        <tr>
+                                            <td class="px-4 py-2 whitespace-nowrap text-gray-900" x-text="item.ip"></td>
+                                            <td class="px-4 py-2 whitespace-nowrap text-gray-500" x-text="item.count">
+                                            </td>
+                                            <td class="px-4 py-2 whitespace-nowrap text-gray-500" x-text="item.last">
+                                            </td>
+                                        </tr>
+                                    </template>
+                                </tbody>
+                            </table>
+                        </template>
+                    </div>
+                </div>
+                <div x-show="!loading && !data?.length" class="text-center py-8 text-gray-500">
+                    No IP request data available
+                </div>
+            </div>
+        </div> -->
+        <!-- <div class="m-3 max-h-[50%] overflow-none bg-[#1e1e1e] rounded-xl relative border border-[#e2e2e2]"
+            x-data="ipCountrySettings()" x-init="init()">
+            <div
+                class="px-4 py-5 sm:px-6 border-b border-gray-200 bg-[#1e1e1e] flex justify-between items-center sticky top-0">
+                <h2 class="text-md font-medium text-[#e2e2e2]">IP Country Settings</h2>
+                <div class="flex items-center space-x-2">
+                    <span class="h-3 w-3 rounded-full"
+                        :class="statusAllConnected ? 'bg-green-500 pulse-connected' : 'bg-red-500'"></span>
+                    <span x-text="statusAllConnected ? 'Connected' : 'Disconnected'"
+                        class="text-sm text-[#e2e2e2]"></span>
+                </div>
+            </div>
+            <div class="px-4 py-5 sm:p-6">
+                <div x-show="loading" class="text-center py-8">
+                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500">
+                    </div>
+                    <p class="text-lg mt-2 text-[#e2e2e2]">Loading country settings...</p>
+                </div>
+                <div x-show="!loading" class="fade-in">
+                    <div class="flex flex-wrap gap-2">
+                        <template x-for="country in data" :key="country.country">
+                            <div class="flex items-center justify-center basis-[2%]">
+                                <span x-text="country.country.toUpperCase()"
+                                    class="inline-flex items-center justify-center w-[36px] px-1 py-1 rounded-full text-xs font-bold"
+                                    :class="country.accepted ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"></span>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div> -->
+    </div>
+
+    <script>
+        function serverMetrics() {
+            return {
+                connected: false,
+                data: null,
+                loading: true,
+                socket: null,
+                reconnectInterval: null,
+                heartbeatInterval: null,
+                heartbeatTimeout: null,
+
+                usageColor(usage) {
+                    usage = parseFloat(usage || 0);
+                    if (usage <= 25) return 'bg-[#10a900] drop-shadow-2xl drop-shadow-[#10a900]/50';
+                    if (usage <= 50) return 'bg-[#ffe117] drop-shadow-2xl drop-shadow-[#ffe117]/50';
+                    if (usage <= 75) return 'bg-[#e30000] drop-shadow-2xl drop-shadow-[#e30000]/50';
+                    return 'bg-[#4f21d5] drop-shadow-2xl drop-shadow-[#4f21d5]/50';
+                },
+
+                usageGradient(usage) {
+                    if (usage == 0) {
+                        return false
+                    }
+                    usage = parseFloat(usage || 0);
+                    if (usage <= 25) return 'drop-shadow-2xl drop-shadow-[#10a900]/50 bg-gradient-to-b from-[#10a900]/100 to-transparent';
+                    if (usage <= 50) return 'drop-shadow-2xl drop-shadow-[#ffe117]/50 bg-gradient-to-b from-[#ffe117]/100 to-transparent';
+                    if (usage <= 75) return 'drop-shadow-2xl drop-shadow-[#e30000]/50 bg-gradient-to-b from-[#e30000]/100 to-transparent';
+                    return 'drop-shadow-2xl drop-shadow-[#4f21d5]/50 bg-gradient-to-b from-[#4f21d5]/100 to-transparent';
+                },
+
+                init() {
+                    this.connectWebSocket();
+                    this.startHeartbeat();
+
+                    this.reconnectInterval = setInterval(() => {
+                        if (!this.connected) {
+                            console.log('تلاش برای اتصال دوباره به server metrics...');
+                            this.connectWebSocket();
+                        }
+                    }, 60000);
+                },
+
+                startHeartbeat() {
+                    if (this.heartbeatInterval) clearInterval(this.heartbeatInterval);
+                    if (this.heartbeatTimeout) clearTimeout(this.heartbeatTimeout);
+
+                    this.heartbeatInterval = setInterval(() => {
+                        if (this.connected && this.socket.readyState === WebSocket.OPEN) {
+                            this.socket.send(JSON.stringify({
+                                type: 'ping'
+                            }));
+
+                            this.heartbeatTimeout = setTimeout(() => {
+                                console.warn('No pong received, closing socket...');
+                                this.socket.close();
+                            }, 10000);
+                        }
+                    }, 30000);
+                },
+
+                connectWebSocket() {
+                    if (this.socket) {
+                        this.socket.close();
+                    }
+
+                    this.socket = new WebSocket('wss://stream.ahrm.ir/security/usage');
+
+                    this.socket.addEventListener('open', (event) => {
+                        this.connected = true;
+                        console.log('Server metrics WebSocket connection opened:', event);
+                    });
+
+                    this.socket.addEventListener('message', (event) => {
+                        try {
+                            const message = JSON.parse(event.data);
+
+                            if (message.type === 'pong') {
+                                clearTimeout(this.heartbeatTimeout);
+                                return;
+                            }
+
+                            this.data = message;
+                            console.log(this.data);
+                            this.loading = false;
+                        } catch (e) {
+                            console.error('Error parsing server metrics message:', e);
+                        }
+                    });
+
+                    this.socket.addEventListener('close', (event) => {
+                        this.connected = false;
+                        clearInterval(this.heartbeatInterval);
+                        clearTimeout(this.heartbeatTimeout);
+                        console.log('Server metrics WebSocket connection closed:', event);
+                    });
+
+                    this.socket.addEventListener('error', (event) => {
+                        this.connected = false;
+                        clearInterval(this.heartbeatInterval);
+                        clearTimeout(this.heartbeatTimeout);
+                        console.error('Server metrics WebSocket error:', event);
+                    });
+                },
+
+                formatBytes(bytes) {
+                    if (bytes === 0) return '0 Bytes';
+                    const k = 1024;
+                    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+                    const i = Math.floor(Math.log(bytes) / Math.log(k));
+                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+                },
+
+                formatMB(mb) {
+                    if (mb < 1024) return mb.toFixed(2) + ' MB';
+                    return (mb / 1024).toFixed(2) + ' GB';
+                }
+            }
+        }
+
+        function ipRequests() {
+            return {
+                connected: false,
+                data: null,
+                loading: true,
+                socket: null,
+                reconnectInterval: null,
+                heartbeatInterval: null,
+                heartbeatTimeout: null,
+
+                init() {
+                    this.connectWebSocket();
+                    this.startHeartbeat();
+
+                    this.reconnectInterval = setInterval(() => {
+                        if (!this.connected) {
+                            console.log('تلاش برای اتصال دوباره ipRequests...');
+                            this.connectWebSocket();
+                        }
+                    }, 60000);
+                },
+
+                startHeartbeat() {
+                    if (this.heartbeatInterval) clearInterval(this.heartbeatInterval);
+                    if (this.heartbeatTimeout) clearTimeout(this.heartbeatTimeout);
+
+                    this.heartbeatInterval = setInterval(() => {
+                        if (this.connected && this.socket.readyState === WebSocket.OPEN) {
+                            this.socket.send(JSON.stringify({
+                                type: 'ping'
+                            }));
+
+                            this.heartbeatTimeout = setTimeout(() => {
+                                console.warn('No pong received, closing socket...');
+                                this.socket.close();
+                            }, 10000);
+                        }
+                    }, 30000);
+                },
+
+                chunkedData() {
+                    if (!this.data) return [];
+
+                    const chunks = [];
+                    const itemsPerChunk = 6;
+                    const maxChunks = 10;
+
+                    for (let i = 0; i < Math.min(this.data.length, maxChunks * itemsPerChunk); i += itemsPerChunk) {
+                        chunks.push(this.data.slice(i, i + itemsPerChunk));
+                    }
+
+                    return chunks;
+                },
+
+                connectWebSocket() {
+                    if (this.socket) {
+                        this.socket.close();
+                    }
+
+                    this.socket = new WebSocket('wss://stream.ahrm.ir/security/ip-request/');
+
+                    this.socket.addEventListener('open', (event) => {
+                        this.connected = true;
+                        console.log('IP requests WebSocket connection opened:', event);
+                    });
+
+                    this.socket.addEventListener('message', (event) => {
+                        try {
+                            const message = JSON.parse(event.data);
+
+                            if (message.type === 'pong') {
+                                clearTimeout(this.heartbeatTimeout);
+                                return;
+                            }
+
+                            this.data = message;
+                            this.loading = false;
+                        } catch (e) {
+                            console.error('Error parsing IP requests message:', e);
+                        }
+                    });
+
+                    this.socket.addEventListener('close', (event) => {
+                        this.connected = false;
+                        clearInterval(this.heartbeatInterval);
+                        clearTimeout(this.heartbeatTimeout);
+                        console.log('IP requests WebSocket connection closed:', event);
+                    });
+
+                    this.socket.addEventListener('error', (event) => {
+                        this.connected = false;
+                        clearInterval(this.heartbeatInterval);
+                        clearTimeout(this.heartbeatTimeout);
+                        console.error('IP requests WebSocket error:', event);
+                    });
+                }
+            }
+        }
+
+        function ipCountrySettings() {
+            return {
+                connected: false,
+                data: null,
+                loading: true,
+                socket: null,
+                reconnectInterval: null,
+                heartbeatInterval: null,
+                heartbeatTimeout: null,
+                statusAllConnected: true,
+                root: null,
+                chart: null,
+                countryMap: {},
+
+                init() {
+                    if (!this.root) {
+                        this.renderMap(); // Only once!
+                    }
+                    this.connectWebSocket();
+                    this.startHeartbeat();
+
+                    this.reconnectInterval = setInterval(() => {
+                        if (!this.connected) {
+                            console.log('تلاش برای اتصال دوباره به IP country settings...');
+                            this.connectWebSocket();
+                        }
+                    }, 60000);
+                },
+
+                startHeartbeat() {
+                    if (this.heartbeatInterval) clearInterval(this.heartbeatInterval);
+                    if (this.heartbeatTimeout) clearTimeout(this.heartbeatTimeout);
+
+                    this.heartbeatInterval = setInterval(() => {
+                        if (this.connected && this.socket.readyState === WebSocket.OPEN) {
+                            this.socket.send(JSON.stringify({
+                                type: 'ping'
+                            }));
+
+                            this.heartbeatTimeout = setTimeout(() => {
+                                console.warn('No pong received, closing socket...');
+                                this.socket.close();
+                            }, 10000);
+                        }
+                    }, 30000);
+                },
+
+                updateConnectionStatus() {
+                    this.statusAllConnected = !this.data.some(country => !country.accepted);
+                },
+                destroy() {
+                    if (this.root) {
+                        this.root.dispose();
+                        this.root = null;
+                    }
+                },
+
+                connectWebSocket() {
+                    if (this.socket) {
+                        this.socket.close();
+                    }
+
+                    this.socket = new WebSocket('wss://stream.ahrm.ir/security/ipset');
+
+                    this.socket.addEventListener('open', (event) => {
+                        this.connected = true;
+                        console.log('IP country settings WebSocket connection opened:', event);
+                    });
+
+                    this.socket.addEventListener('message', (event) => {
+                        try {
+                            const message = JSON.parse(event.data);
+
+                            if (message.type === 'pong') {
+                                clearTimeout(this.heartbeatTimeout);
+                                return;
+                            }
+
+                            this.data = message?.ipCountry || [];
+
+                            // ✅ Step 1: Create a fast lookup map for countries
+                            this.countryMap = {};
+                            this.data.forEach(c => {
+                                if (c.country) {
+                                    this.countryMap[c.country.toLowerCase()] = c;
+                                }
+                            });
+
+                            this.updateConnectionStatus();
+                            this.loading = false;
+
+                            // ✅ Step 3: Refresh the map by re-setting the geoJSON
+                            if (this.polygonSeries) {
+                                const currentGeoJSON = this.polygonSeries.get("geoJSON");
+
+                                // Force a redraw to trigger fill adapters
+                                this.polygonSeries.set("geoJSON", null);
+                                this.polygonSeries.set("geoJSON", currentGeoJSON);
+                            }
+                        } catch (e) {
+                            console.error('Error parsing IP country settings message:', e);
+                        }
+                    });
+
+                    this.socket.addEventListener('close', (event) => {
+                        this.connected = false;
+                        clearInterval(this.heartbeatInterval);
+                        clearTimeout(this.heartbeatTimeout);
+                        console.log('IP country settings WebSocket connection closed:', event);
+                    });
+
+                    this.socket.addEventListener('error', (event) => {
+                        this.connected = false;
+                        clearInterval(this.heartbeatInterval);
+                        clearTimeout(this.heartbeatTimeout);
+                        console.error('IP country settings WebSocket error:', event);
+                    });
+                },
+                renderMap() {
+                    if (this.chart) {
+                        this.chart.dispose();
+                    }
+                    if (this.root) {
+                        this.root.dispose();
+                    }
+
+                    am5.ready(() => {
+                        let root = am5.Root.new("chartdiv");
+
+                        root.setThemes([am5.Theme.new(root)]);
+
+                        let chart = root.container.children.push(
+                            am5map.MapChart.new(root, {
+                                panX: "rotateX",
+                                panY: "rotateY",
+                                projection: am5map.geoMercator(),
+                                wheelY: "zoom"
+                            })
+                        );
+
+                        let polygonSeries = chart.series.push(
+                            am5map.MapPolygonSeries.new(root, {
+                                geoJSON: am5geodata_worldLow,
+                                exclude: ["AQ"] // exclude Antarctica if you want
+                            })
+                        );
+
+                        // Add adapter here:
+                        polygonSeries.mapPolygons.template.adapters.add("fill", (fill, target) => {
+                            const countryId = target.dataItem.get("id").toLowerCase();
+
+                            const countryData = this.countryMap?.[countryId];
+
+                            if (countryData) {
+                                return countryData.accepted ? am5.color(0x22c55e) : am5.color(0xef4444);
+                            }
+
+                            return am5.color(0xcbd5e1); // default color
+                        });
+
+                        polygonSeries.mapPolygons.template.setAll({
+                            tooltipText: "{name}",
+                            interactive: true
+                        });
+
+                        this.chart = chart;
+                        this.polygonSeries = polygonSeries;
+                        this.root = root;
+                    });
+                }
+            }
+        }
+
+        function fullscreenHandler() {
+            return {
+                isFullscreen: false,
+
+                init() {
+                    // Watch for fullscreen change event
+                    document.addEventListener('fullscreenchange', () => {
+                        this.isFullscreen = !!document.fullscreenElement;
+                    });
+                },
+
+                enterFullscreen() {
+                    document.documentElement.requestFullscreen();
+                }
+            };
+        }
+    </script>
+</body>
+
+</html>

resources/views/livewire/tools/coments.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- The Master doesn't talk, he acts. --}}
+</div>

resources/views/livewire/tools/home-comments.blade.php

@@ -0,0 +1,51 @@
+<div>
+
+    <div>
+        @foreach ($comments->other as $other_comment)
+        <div class="mx-10">
+            <div>
+
+                @if ($other_comment->status == 1)
+                <div class="">
+                    <div>
+                        <div
+                            class="p-5 rounded  @if ($other_comment->type == 1) bg-gray-400 @else bg-gray-200 @endif flex flex-col gap-3 m-3">
+                            <div>
+                                <h4> name : {{ $other_comment->name }}</h4>
+                                <p> message : {{ $other_comment->message }}</p>
+                            </div>
+                            <div x-data="{ reply_id: 0 }">
+                                <button @click="reply_id='{{ $other_comment->id }}'"
+                                    class="p-2 bg-blue-300 ">reply</button>
+                                <div @click.outside="reply_id=0" x-show="reply_id=='{{ $other_comment->id }}'"
+                                    class="flex flex-col gap-5">
+                                    <form>
+                                        <div>
+                                            <input wire:model="comment_name_reply" class="border p-1"
+                                                placeholder="name">
+                                            <input wire:model="comment_message_reply" class="border p-1"
+                                                placeholder="message">
+                                            <button @click="reply_id=0" type="button"
+                                                wire:click="reply({{ $other_comment->id }},{{ $comment->id }})"
+                                                class="bg-green-300 p-2 rounded"> reply </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+                @endif
+
+            </div>
+            <div>
+                @livewire('tools.home-comments', ['comments' => $other_comment, 'comment' => $comment, 'blog_id' => $blog_id], key($other_comment->id))
+            </div>
+
+        </div>
+        @endforeach
+
+    </div>
+
+</div>

resources/views/livewire/tools/panel-comments.blade.php

@@ -0,0 +1,83 @@
+<div>
+
+    <div>
+
+
+        @foreach ($comments->other as $another_comment)
+        <div class="mx-10">
+            <div>
+                <div x-show="(( (status==comment_status) && comment_seen==1)||(status=='new' && (comment_seen==0 || parent_reply>0))) || status=='all'"
+                    class="p-5 rounded  @if ($another_comment->type == 1)
+bg-gray-400
+@else
+bg-gray-200
+@endif flex flex-col gap-3 m-3">
+                    <div>
+                        <h4> name : {{ $another_comment->name }}</h4>
+                        <p> message : {{ $another_comment->message }}</p>
+                        <div class="flex gap-2" x-data="{ comment_status: '{{ $another_comment->status }}', comment_seen: '{{ $another_comment->seen }}' }">
+                            {{-- <button  class="p-2 mt-3 rounded bg-green-500">edit</button> --}}
+                            @if ($another_comment->type == 1)
+                            {{-- answer --}}
+                            <button wire:click="delete_comment({{ $another_comment->id }})"
+                                class="p-2 mt-3 rounded bg-red-500">delete</button>
+                            @else
+                            {{-- reply --}}
+                            <button
+                                @click="comment_seen==0?parent_reply=parent_reply-1:'',comment_status=1,comment_seen=1 "
+                                wire:click="comment_status({{ $another_comment->id }},{{ true }},{{ $comment->id }})"
+                                x-show="comment_status==0||comment_seen==0"
+                                class="p-2 mt-3 rounded bg-green-500">accept</button>
+                            <button
+                                @click="comment_seen==0?parent_reply=parent_reply-1:'',comment_status=0,comment_seen=1"
+                                wire:click="comment_status({{ $another_comment->id }},{{ true }},{{ $comment->id }})"
+                                x-show="comment_status==1||comment_seen==0"
+                                class="p-2 mt-3 rounded bg-red-500">reject</button>
+                            @endif
+                        </div>
+                    </div>
+
+                    <div>
+                        @if ($another_comment->type != 1)
+                        <div>
+                            <button @click="answer_id='{{ $another_comment->id }}'"
+                                class="bg-green-300 p-1 rounded"> answer </button>
+
+                            <div>
+                                <div @click.outside="answer_id=0"
+                                    x-show="answer_id=='{{ $another_comment->id }}'"
+                                    class="flex flex-col gap-5">
+                                    <form>
+                                        <div>
+                                            <input wire:model="comment_message" class="border p-1"
+                                                placeholder="message">
+                                            <button type="button"
+                                                wire:click="answer({{ $another_comment->id }})"
+                                                @click="answer_id=0" class="bg-green-300 p-1 rounded"> answer
+                                            </button>
+                                            <button @click="answer_id=0" class="bg-red-300 p-1 rounded"> close
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                        @endif
+
+                    </div>
+
+
+                </div>
+            </div>
+
+            <div>
+                @livewire('tools.panel-comments', ['comments' => $another_comment, 'comment' => $comment, 'blog_id' => $blog_id], key($another_comment->id))
+            </div>
+
+        </div>
+        @endforeach
+
+
+    </div>
+
+</div>

resources/views/partials/download.blade.php

@@ -0,0 +1,128 @@
+<div class="  lg:block hidden relative mx-auto max-w-5xl px-8 lg:px-0 pt-12 pb-24  bg-white">
+    <div id="advertise_section" class="px-8">
+        <div class="absolute z-10 left-5 bottom-10">
+            <img class="w-96" src="https://ahrominvest.ir/page/advertise-2.png" alt="">
+        </div>
+        <div class="border rounded-xl border-slate-300 w-full h-full ps-16 pe-10 flex justify-between">
+            <div class="py-10 flex space-x-reverse space-x-12">
+                <div class="border rounded-xl border-slate-300 pt-2 pb-1 px-2 space-y-1">
+                    <div>
+                        <img src="https://ahrominvest.ir/page/qr.svg" class="w-28 h-28" alt="" srcset="">
+                    </div>
+                    <div>
+                        <p class="text-xs font-black flex justify-center">برای دانلود اسکن کنید!</p>
+                    </div>
+                </div>
+                <div class="flex flex-col justify-between">
+                    <div>
+                        <p class="text-xl font-extrabold">سرمایه&zwnj;گذاری اهرم</p>
+                        <p class="text-lg font-medium">سریع و مطمئن سرمایه&zwnj;گذاری کنید.</p>
+                    </div>
+
+                    <a href="{{ route('more.app') }}" class="flex space-x-1 space-x-reverse">
+                        <div>
+                            <p class="text-blue-500 text-lg">مشاهده لینک&zwnj;های دانلود</p>
+                        </div>
+                        <div class="flex items-center justify-center mt-1.5">
+                            <svg class="w-5 h-5 fill-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
+                                style="rotate: 90deg">
+                                <path
+                                    d="M241 337c-9.4 9.4-24.6 9.4-33.9 0L47 177c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143L367 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L241 337z">
+                                </path>
+                            </svg>
+                        </div>
+                    </a>
+
+                    <div class="flex space-x-2 space-x-reverse">
+                        <div class="flex space-x-1 space-x-reverse">
+                            <div>
+                                <svg class="w-4 h-4 fill-slate-300" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 22.773 22.773">
+                                    <g xmlns="http://www.w3.org/2000/svg">
+                                        <g>
+                                            <path
+                                                d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573    c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z">
+                                            </path>
+                                            <path
+                                                d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334    c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0    c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019    c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464    c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648    c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z">
+                                            </path>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                        <g>
+                                        </g>
+                                    </g>
+                                </svg>
+                            </div>
+                            <div>
+                                <svg class="w-5 h-5 fill-slate-300" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 32 32">
+                                    <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+                                    <path
+                                        d="M32 25.333h-32c0.318-2.896 1.328-5.672 2.948-8.094 1.245-1.922 2.911-3.531 4.88-4.708l0.547-0.302-2.693-4.547c-0.198-0.323-0.094-0.74 0.224-0.938 0.318-0.188 0.734-0.083 0.922 0.24l2.771 4.667c2.052-0.818 4.245-1.224 6.453-1.198 2.172-0.026 4.323 0.38 6.333 1.198l2.76-4.667c0.193-0.323 0.615-0.427 0.932-0.224 0.318 0.198 0.411 0.615 0.214 0.932l-2.693 4.562 0.667 0.37c1.958 1.224 3.615 2.87 4.839 4.828 1.531 2.385 2.521 5.073 2.896 7.88zM22 19.359c0 0.74 0.599 1.333 1.333 1.333s1.333-0.594 1.333-1.333c0-0.734-0.599-1.333-1.333-1.333s-1.333 0.599-1.333 1.333zM7.333 19.359c0 0.74 0.599 1.333 1.333 1.333s1.333-0.594 1.333-1.333c0-0.734-0.599-1.333-1.333-1.333s-1.333 0.599-1.333 1.333z">
+                                    </path>"
+                                </svg>
+                            </div>
+                        </div>
+                        <p class=" text-slate-400 text-xs flex items-end">قابلیت نصب روی Android و IOS</p>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<section id="recommend_download_app_section"
+    class="fixed bottom-0 z-50 w-full bg-ahrom hidden rounded-t-xl items-center px-4">
+    <div class="flex justify-between w-full py-2">
+        <a href="https://ahrominvest.ir/app" class="flex space-x-2 space-x-reverse">
+            <div>
+                <svg class="w-10 h-10 fill-white" xmlns="http://www.w3.org/2000/svg" version="1.0"
+                    viewBox="0 0 720.000000 720.000000" preserveAspectRatio="xMidYMid meet">
+                    <g transform="translate(0.000000,720.000000) scale(0.100000,-0.100000)" stroke="none">
+                        <path
+                            d="M2790 7139 c-162 -8 -424 -38 -605 -69 -370 -63 -685 -166 -950 -311 -524 -285 -894 -805 -1060 -1489 -42 -174 -87 -508 -116 -865 -17 -206 -23 -1114 -10 -1390 21 -425 72 -851 130 -1090 136 -554 429 -1028 816 -1320 414 -311 1056 -496 1860 -535 271 -13 1209 -13 1480 0 858 41 1511 242 1934 595 378 315 652 805 766 1370 45 223 87 595 105 930 13 241 13 1043 0 1280 -20 368 -66 757 -115 982 -151 687 -529 1232 -1054 1525 -395 219 -950 354 -1596 388 -216 11 -1365 11 -1585 -1z m1023 -3701 l-1448 -1448 -405 0 -405 0 1850 1850 1850 1850 3 -402 2 -403 -1447 -1447z m965 -949 c271 -272 489 -498 486 -502 -10 -9 -1994 -9 -1994 0 0 14 995 1003 1005 1001 6 -2 232 -226 503 -499z">
+                        </path>
+                    </g>
+                </svg>
+            </div>
+            <div class="flex items-center">
+                <p class="text-white font-extrabold">دانلود اپلیکیشن سرمایه&zwnj;گذاری اهرم</p>
+            </div>
+        </a>
+        <div id="recommend_download_app_close_btn" class="flex items-center justify-center">
+            <svg class="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                <path
+                    d="M378.4 71.4c8.5-10.1 7.2-25.3-2.9-33.8s-25.3-7.2-33.8 2.9L192 218.7 42.4 40.6C33.9 30.4 18.7 29.1 8.6 37.6S-2.9 61.3 5.6 71.4L160.7 256 5.6 440.6c-8.5 10.2-7.2 25.3 2.9 33.8s25.3 7.2 33.8-2.9L192 293.3 341.6 471.4c8.5 10.1 23.7 11.5 33.8 2.9s11.5-23.7 2.9-33.8L223.3 256l155-184.6z">
+                </path>
+            </svg>
+        </div>
+    </div>
+</section>

resources/views/partials/footer.blade.php

@@ -0,0 +1,206 @@
+@if (Route::currentRouteName() == 'credit')
+<footer class="relative bg-white border-t lg:block hidden  p-4">
+    @else
+    <footer class="relative bg-white mt-3 lg:mt-14  border-t  p-4 ">
+        @endif
+        <div class="mx-auto max-w-5xl p-3 text-sm leading-6 lg:p-10 lg:px-0">
+            <div class="lg:block hidden bg-green-50 p-3 mb-6 lg:mb-14  rounded-3xl">
+                <div
+                    class="flex flex-col max-w-5xl mx-auto gap-y-8 text-center  sm:flex-row  items-center sm:justify-start gap-2">
+                    <svg width="20px" class="w-[20px] mb-1 h-[20px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                        <path
+                            d="M336 192c0-79.5-64.5-144-144-144S48 112.5 48 192c0 12.4 4.5 31.6 15.3 57.2c10.5 24.8 25.4 52.2 42.5 79.9c28.5 46.2 61.5 90.8 86.2 122.6c24.8-31.8 57.8-76.4 86.2-122.6c17.1-27.7 32-55.1 42.5-79.9C331.5 223.6 336 204.4 336 192zm48 0c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192zm-160 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-112 0a80 80 0 1 1 160 0 80 80 0 1 1 -160 0z" />
+                    </svg>
+                    <h2 class="  text-slate-900 font-bold  text-[15px] lg:text-[18px] ">
+                        پشتیبانی تلفنی : از ساعت ۹ الی ۲۰ <span class="mx-2">|</span> تلفن پشتیبانی : <span dir="rtl">
+                            021-91558184</span>
+                    </h2>
+
+                </div>
+            </div>
+
+
+            <div class=" lg:hidden block   mb-6 lg:mb-14   border-b pb-2">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <div class="bg-gray-100 rounded-full p-2 ">
+                            <svg class="w-[1.5rem] h-[1.5rem]" fill="#000" xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 512 512">
+                                <path xmlns="http://www.w3.org/2000/svg"
+                                    d="M48 256C48 141.1 141.1 48 256 48s208 93.1 208 208V400.1c0 22.1-17.9 40-40 40L313.6 440c-8.3-14.4-23.8-24-41.6-24H240c-26.5 0-48 21.5-48 48s21.5 48 48 48h32c17.8 0 33.3-9.7 41.6-24l110.4 .1c48.6 0 88.1-39.4 88.1-88V256C512 114.6 397.4 0 256 0S0 114.6 0 256v40c0 13.3 10.7 24 24 24s24-10.7 24-24V256zm112-32V336c-17.7 0-32-14.3-32-32V256c0-17.7 14.3-32 32-32zM80 256v48c0 44.2 35.8 80 80 80h16c17.7 0 32-14.3 32-32V208c0-17.7-14.3-32-32-32H160c-44.2 0-80 35.8-80 80zm272-32c17.7 0 32 14.3 32 32v48c0 17.7-14.3 32-32 32V224zm80 32c0-44.2-35.8-80-80-80H336c-17.7 0-32 14.3-32 32V352c0 17.7 14.3 32 32 32h16c44.2 0 80-35.8 80-80V256z">
+                                </path>
+                            </svg>
+                        </div>
+                        <div class="flex-flex-col gap-2">
+                            <h6 class="text-black font-bold">
+                                تماس با پشتیبانی
+                            </h6>
+                            <span class="text-sm text-slate-400">از ساعت ۹ الی ۲۰</span>
+                        </div>
+                    </div>
+                    <a href="tel:02191558184" class="px-3 text-black bg-gray-100 py-2 rounded-2xl">
+                        تماس
+                    </a>
+                </div>
+            </div>
+
+            <div class=" lg:hidden block  mb-6 lg:mb-14   border-b pb-2">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <div class="  rounded-full   ">
+                            <img style="width:36px;" class="  rounded-full   " src=" {{  env('APP_URL_IMAGE').'images/static/logo.png'   }}"
+                                alt="لوگو سرمایه&zwnj;گذاری اهرم">
+                        </div>
+                        <div class="flex-flex-col gap-2">
+                            <h6 class="text-black font-bold">
+                                اپلیکیشن سرمایه گذاری اهرم
+                            </h6>
+                            <span class="text-sm text-slate-400">استفاده راحت تر از امکانات</span>
+                        </div>
+                    </div>
+                    <a href="https://ahrominvest.ir/app" class="px-3  text-black bg-gray-100 py-2 rounded-2xl">
+                        دانلود
+                    </a>
+                </div>
+            </div>
+
+
+
+
+
+
+
+
+            <div class=" bg-[#F9FAFB] p-3 mb-6 lg:block hidden   rounded-3xl">
+                <div
+                    class="flex flex-col max-w-5xl mx-auto gap-y-8 text-center  sm:flex-row  items-center sm:justify-start gap-2">
+                    <img style="width:50px;" src="{{env('APP_URL_IMAGE').'images/static/logo.png'  }}" alt="لوگو سرمایه&zwnj;گذاری اهرم">
+                    <h2 class="  text-slate-900 font-bold text-lg ">
+                        دانلود اپلیکیشن سرمایه گذاری اهرم
+                    </h2>
+                    <div class="flex flex-row items-center gap-2 lg:ms-auto">
+                        <div class="flex items-center gap-2 ms-auto pe-2">
+                            <a href="https://myket.ir/app/app.ahrominvest.ir"><img class="w-[150px]"
+                                    src="{{ env('APP_URL_IMAGE').'images/static/myket.png'  }}" alt="دانلود از مایکت"></a>
+                            <a href="https://cafebazaar.ir/app/app.ahrominvest.ir"><img class="w-[150px]"
+                                    src="{{  env('APP_URL_IMAGE').'images/static/bazar.png'  }}" alt="دانلود از بازار"></a>
+                        </div>
+                        <a href="https://ahrominvest.ir/app" wire:navigate
+                            class="  bg-[#d2d4d6]  w-[35px]  h-[35ppx] lg:w-[46px] lg:h-[46px] rounded-lg flex items-center justify-center ">
+                            <svg xmlns="http://www.w3.org/2000/svg" style="width: 35px; height: 35px" fill="#000"
+                                viewBox="0 0 448 512">
+                                <path
+                                    d="M416 256a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zm-160 0a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zM64 288a32 32 0 1 1 0-64 32 32 0 1 1 0 64z">
+                                </path>
+                            </svg>
+                        </a>
+                    </div>
+
+                </div>
+            </div>
+            <div class="mb-14 flex lg:flex-row flex-col items-start w-full gap-2 ">
+
+
+                <div x-data="{ expanded: false }">
+                    <h2 class="font-bold text-lg mb-2 text-black">
+                        آشنایی با مجله خبری سرمایه‌گذاری اهرم
+                    </h2>
+                    <p x-cloak x-show="expanded" x-collapse.min.70px
+                        class=" md:text-justify text-black text-[14px] md:text-[16px]">
+
+                        در <span>مجله خبری سرمایه‌گذاری اهرم</span>، شما به مجموعه‌ای از مطالب آموزشی ارزهای دیجیتال و فناوری
+                        بلاکچین دسترسی خواهید داشت. با مطالعه این منابع، دانش خود را درباره بازار رمزارزها ارتقا دهید و با آگاهی
+                        کامل‌تری معاملات خود را انجام دهید. ما در <span>مجله خبری سرمایه‌گذاری اهرم</span>، به شما از مفاهیم
+                        پایه تا مباحث پیشرفته در حوزه ارزهای دیجیتال، تحلیل تکنیکال، استراتژی‌های معاملاتی و رویدادهای مهم بازار
+                        را آموزش می‌دهیم. منابع آموزشی ما به گونه‌ای طراحی شده‌اند که شما را برای حضور فعال و حرفه‌ای در این
+                        بازار آماده کنند.
+                        <br>
+                        <span>چرا مجله خبری سرمایه گذاری اهرم؟</span>
+                        <br>
+                        <span>دسترسی به آموزش‌های جامع و به‌روز</span>: از اصول اولیه بلاکچین گرفته تا تحلیل ارز های دیجیتال،
+                        تمامی آموزش‌ها به صورت گام‌به‌گام و کاربردی ارائه می‌شوند.
+                        <br>
+                        <span>مقالات و اخبار تخصصی</span>: جدیدترین اطلاعات و تحلیل‌ها درباره بازار ارزهای دیجیتال را در اختیار
+                        شما قرار می‌دهیم تا تصمیمات معاملاتی هوشمندانه‌تری بگیرید.
+                        <br>
+                        <span>آموزش ترید و استراتژی‌های معاملاتی</span>: با یادگیری روش‌های حرفه‌ای خرید و فروش ارزهای دیجیتال،
+                        می‌توانید به یک تریدر موفق تبدیل شوید.
+                        <br>
+                        در <span>مجله خبری سرمایه‌گذاری اهرم</span>، یادگیری شما را تسهیل کرده‌ایم تا با درک بهتر از روند بازار،
+                        بتوانید بهترین تصمیم‌ها را در معاملات خود بگیرید. ما همراه شما هستیم تا دانش و مهارت‌های لازم را کسب
+                        کنید و با اطمینان در بازار ارزهای دیجیتال فعالیت کنید.
+                    </p>
+                    <button x-cloak x-show="expanded == true" class=" text-ahrom flex items-center gap-1 mt-1"
+                        @click="expanded = false">
+                        کمتر
+                        <svg class="w-[12px] h-[12px] fill-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                            <path
+                                d="M15 239c-9.4 9.4-9.4 24.6 0 33.9L207 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L65.9 256 241 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15 239z" />
+                        </svg>
+                    </button>
+                    <button x-cloak x-show="expanded == false" class=" text-ahrom flex items-center gap-1 mt-1"
+                        @click="expanded = true">
+                        بیشتر
+                        <svg class="w-[12px] h-[12px] fill-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                            <path
+                                d="M15 239c-9.4 9.4-9.4 24.6 0 33.9L207 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L65.9 256 241 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15 239z" />
+                        </svg>
+                    </button>
+                </div>
+                <div style="flex-basis:30%; " class="  flex   flex-col  ">
+                    <div class="font-bold text-lg   text-slate-500 block h-[30px]">
+
+                    </div>
+                    <div class="items-center flex gap-2 justify-end">
+                        <div class="w-20 h-20 flex justify-center items-center bg-white rounded-lg p-1">
+                            <div>
+                                <img src="https://ahrominvest.ir/page/blockchainAssociation.png"
+                                    alt="لوگو انجمن بلاک&zwnj;چین ایران">
+                            </div>
+                        </div>
+                        <div class="w-20 h-auto flex justify-center items-center bg-white rounded-lg p-1">
+                            <a href="https://profile.iwmf.ir/organizations/ahrominvest.ir" target="_blank">
+                                <img src="https://ahrominvest.ir/page/iwmf.png" alt="لوگو فین تک">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col-reverse items-center justify-between gap-6 pt-10 lg:flex-row-reverse border-t">
+                <p class="rtl text-center text-slate-600 mx-auto">
+                    تمامی حقوق برای شرکت پردازش اطلاعات مالی اهرم محفوظ می&zwnj;باشد.
+                </p>
+
+            </div>
+        </div>
+    </footer>
+
+
+    <script>
+        var convertEnglishToPersianNumbers = (inputString) => {
+            const englishNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+            const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+            for (let i = 0; i < englishNumbers.length; i++) {
+                inputString = inputString.replace(new RegExp(persianNumbers[i], 'g'), englishNumbers[i]);
+            }
+            return inputString;
+        };
+
+        function numberWithCommas(number) {
+            let x = number;
+            x = x + '';
+            let y = '';
+            if (x.split('.')[1]) {
+                y = x.split('.')[1]
+                x = x.split('.')[0]
+            }
+            x = x.toString();
+            x = x.replace(/,/g, '')
+            if (y != '') {
+                return convertEnglishToPersianNumbers(x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' + y);
+            } else {
+                return convertEnglishToPersianNumbers(x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
+            }
+        };
+    </script>

resources/views/sitemap/index.blade.php

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <sitemap>
+        <loc>{{ url('page.xml').'/' }}</loc>
+    </sitemap>
+    <sitemap>
+        <loc>{{ url('post-category.xml').'/' }}</loc>
+    </sitemap>
+    <sitemap>
+        <loc>{{ url('news-category.xml').'/' }}</loc>
+    </sitemap>
+    @if ($countNews > 0)
+        @for ($i = 0; $i < $news; $i++)
+            @if ($i == 0)
+                <sitemap>
+                    <loc>{{ url('news.xml').'/' }}</loc>
+                </sitemap>
+            @else
+                <sitemap>
+                    <loc>{{ url('news' . $i + 1 . '.xml').'/' }}</loc>
+                </sitemap>
+            @endif
+        @endfor
+    @endif
+
+    @if ($countBlogs > 0)
+        @for ($i = 0; $i < $blogs; $i++)
+            @if ($i == 0)
+                <sitemap>
+                    <loc>{{ url('post.xml').'/' }}</loc>
+                </sitemap>
+            @else
+                <sitemap>
+                    <loc>{{ url('post' . $i + 1 . '.xml').'/' }}</loc>
+                </sitemap>
+            @endif
+        @endfor
+    @endif
+</sitemapindex>

resources/views/sitemap/news.blade.php

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
+    @if (count($news) > 0)
+        @foreach ($news as $new)
+            <url>
+                <loc>{{ route('detail', ['slug' => $new->slug]).'/' }}</loc>
+                <lastmod>{{ $new->updated_at->setTimezone('Asia/Tehran')->toAtomString() }}</lastmod>
+                <changefreq>{{ !is_null($new->changefreq) ? $new->changefreq : 'never' }}</changefreq>
+                <image:image>
+                    <image:loc>{{ env('APP_URL_IMAGE').'images/'.$new->image  }}</image:loc>
+                </image:image>
+                @if (isset($blogImages[$new->id]))
+                    @foreach ($blogImages[$new->id] as $imageUrl)
+                        <image:image>
+                            <image:loc>{{ $imageUrl }}</image:loc>
+                        </image:image>
+                    @endforeach
+                @endif
+            </url>
+        @endforeach
+    @endif
+</urlset>

resources/views/sitemap/newscategory.blade.php

@@ -0,0 +1,21 @@
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    @if (count($categories) > 0)
+        @foreach ($categories as $category)
+            @if ($category->parent_id != null)
+                @php
+                    $categoryparent = App\Models\Category::where('id', $category->parent_id)->first();
+                @endphp
+                <url>
+                    <loc>{{ url('category/' . $categoryparent->slug . '/' . $category->slug).'/' }}</loc>
+                    <lastmod>{{ $category->updated_at->setTimezone('Asia/Tehran')->toAtomString() }}</lastmod>
+                </url>
+            @endif
+            @if ($category->parent == 1)
+                <url>
+                    <loc>{{ url('category/' . $category->slug).'/' }}</loc>
+                    <lastmod>{{ $category->updated_at->setTimezone('Asia/Tehran')->toAtomString() }}</lastmod>
+                </url>
+            @endif
+        @endforeach
+    @endif
+</urlset>

resources/views/sitemap/page.blade.php

@@ -0,0 +1,8 @@
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>{{ env('APP_URL').'/' }}</loc>
+        <lastmod>{{ $latestTimestamp->setTimezone('Asia/Tehran')->toAtomString() }}</lastmod>
+        <changefreq>hourly</changefreq>
+        <priority>1.0</priority>
+    </url>
+</urlset>

resources/views/sitemap/postcategory.blade.php

@@ -0,0 +1,11 @@
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    @if (count($categories) > 0)
+        @foreach ($categories as $category)
+            <url>
+                <loc>{{ url('category/' . $category->slug).'/' }}</loc>
+                <lastmod>{{ $category->updated_at->setTimezone('Asia/Tehran')->toAtomString() }}</lastmod>
+
+            </url>
+        @endforeach
+    @endif
+</urlset>

resources/views/sitemap/posts.blade.php

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
+    @if (count($blogs) > 0)
+        @foreach ($blogs as $blog)
+            <url>
+                @if ($blog->status == 1)
+                    <loc>{{ route('detail', ['slug' => $blog->slug]).'/' }}</loc>
+                    <lastmod>{{ $blog->updated_at->setTimezone('Asia/Tehran')->toAtomString() }}</lastmod>
+                    <image:image>
+                        <image:loc>{{ env('APP_URL_IMAGE').'images/'.$blog->image   }}</image:loc>
+                    </image:image>
+                    @if (isset($blogImages[$blog->id]))
+                        @foreach ($blogImages[$blog->id] as $imageUrl)
+                            <image:image>
+                                <image:loc>{{ $imageUrl }}</image:loc>
+                            </image:image>
+                        @endforeach
+                    @endif
+                @endif
+            </url>
+        @endforeach
+    @endif
+</urlset>